Sometimes, we want to pass data between two components in Angular.

In this article, we’ll look at how to pass data between two components in Angular.

How to pass data between two components in Angular?

To pass data between two components in Angular, we can use Input.

For instance, we write

import { Component, Input } from "angular2/core";

@Component({
  selector: "child",
  styles: [``],
  template: ``,
})
export class ChildComponent {
  @Input() valueToPass = 0;
}

to add the valueToPass Input.

Then in the parent, we write

<child [valueToPass]="value"></child>

to add the child component in the template and get the valueToPass value and assign it to value in the parent.

Conclusion

To pass data between two components in Angular, we can use Input.