DEV Community

Cover image for Passing data from parent to child components in Angular
Lorenzo Zarantonello for This is Angular

Posted on • Updated on • Originally published at vitainbeta.org

Passing data from parent to child components in Angular

While there are several ways to make properties available throughout your Angular app, I found this 3-step process pretty easy to follow and remember.

For the sake of simplicity, we call the parent component Parent and the child component Child. If you prefer a more practical approach, check out this practical example to get a better understanding.

Here are the three steps to pass a property to a child component:

1. Prepare Child.ts for external Input

Prepare the child component class (Child.ts) to receive external inputs.

  • External refers to data that is not available inside the component itself (In this case, Child).
  • Input refers to the property that the parent component (Parent) passes to the child component.
// Child.ts

export class Child implements OnInit {
  @Input() expectedProp: { title: string };
  constructor() {}

  ngOnInit(): void {}
}

Enter fullscreen mode Exit fullscreen mode

The @Input() decorator expects a property that we named expectedProp. You can name this property as you wish but remember to be consistent in the next steps.
This custom property is of type object with a key named title of type string.

2. Bind Property in Parent.html

First of all, we have some data in our parent component class (Parent.ts)

// Parent.ts

export class AppComponent {

  book = { title: 'Principles' }

}
Enter fullscreen mode Exit fullscreen mode

We want to pass book to Child.
To do so, we do two things in Parent.html:

  1. We use the selector <child></child> to use the child component.
  2. We need to bind the data coming from the parent component class (Parent.ts) to the custom property, expectedProp, that we declared in Child.ts.

Quick recap:

  • Data in Parent.ts: book
  • Custom property in Child.ts: expectedProp
  • Property binding syntax: [property]="data"

The binding happens in Parent.html which becomes the point of contact between Parent.ts and Child.ts

// Parent.html 

<ul>
  <child 
    [expectedProp] = "book"
    >
  </child>
</ul>

Enter fullscreen mode Exit fullscreen mode

3. Use Property in Child.html

The custom property is now available in Child and it can be used in Child.html.
As a result, we can use interpolation binding syntax (double curly braces) to presents the component's property value inside the template.

// Child.html

<li>
  {{expectedProp.title}} 
</li>

Enter fullscreen mode Exit fullscreen mode

Conclusions

If this seems too abstract, check out this practical example.

Otherwise, remember the three steps:

  1. Prepare Child.ts for external Input
  2. Bind Property in Parent.html
  3. Use Property in Child.html

Top comments (2)

Collapse
 
nvminhtu profile image
Tu Nguyen

Thanks for your serie!

Collapse
 
mitul327 profile image
Mitul Panchal

How about HTML template, how can we pass from child to parent?