How to pass properties object to child component in Angular
Angular is a popular open-source Javascript framework for developing responsive single-page web applications. Being a component-based framework, we use it to divide our application's functionalities into small, independent, and reusable components.
Parent-child components
While dividing our application into components, we enter a stage where we must deal with parent-child relationships between components. This means the parent component contains the child component, as shown in the image below.
Once we create two components, we can make the parent-child relationship by simply calling one component into the other using the selector. But what if we want to add and pass data to the child component from the parent component?
Data passing: parent to child
Angular enables us to achieve data passing between parent and child by providing the @Input() decorator. First, we need to import Input from @angular.core using the following command:
import { Input } from '@angular/core';
After importing Input, we declare the variable for which we want the data to be passed from the parent component. The syntax for declaring the variable is given in the following code block:
@Input() <variable-name>: any;
We can use any variable name in place of <variable-name>. To get a clear idea of how we can pass data from the parent component, let's see a complete coding example:
Coding example
Consider that we have a list of persons in our parent component and want to show each person's information in the child component. We can see a high-level diagram of the scenario below:
Install @angular/cli
To get started, we install @angular/cli globally by running the following npm command in the terminal:
npm install -g @angular/cli
Create project
After that, we create our angular project using the following command:
ng new <project-name>
We can add any name in place of <project-name>. Once we are done with creating the project, we can run the project by using the following commands:
cd <project-name> // To go to the project directoryng serve // To start the project
Parent component
Now, we create the parent component using the command:
ng create parent-component
Running this command will create a folder parent-component in the src/app/ directory. The folder will contain the .html, .css, .ts, and .spec.ts files.
We write the main logic of the component in the .ts file. We can see the code for the .ts file below:
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-parent-component',templateUrl: './parent-component.component.html',styleUrls: ['./parent-component.component.css']})export class ParentComponentComponent implements OnInit {get_person(){const person = [{name:'John' , profession:'Architect' , img:"../../assets/avatar1.png"},{name:'Bob' , profession:'Civil Engineer' , img:"../../assets/avatar2.png"},{name:'Alex' , profession:'Computer Scientist' , img:"../../assets/avatar3.png"},{name:'Andrew' , profession:'Mechanical Engineer' , img:"../../assets/avatar4.png"},]return person}parent_list : any = []ngOnInit(){this.parent_list = this.get_person()}}
Lines 11–17: We create a function
get_person()that returns a hard-coded list ofperson.Lines 20–22: We use the
ngOnInit()function, which is the first function that runs once the component is created. We call theget_person()function and save thepersonlist in theparent_listof the parent component.
Once we change the .ts file, we move to the parent component's HTML file. We can see the code for the parent component's HTML file below.
<div *ngFor = "let person of parent_list"><app-child-component [person] = 'person'></app-child-component></div>
Line 1: We create a
divthat contains the*ngFordirective to iterate through theparent_list.Line 2: We declare the child component by using the child components selector, i.e.,
app-child-componentas defined in the.tsfile of the child component. We communicate the data from the parent to the child using the[person]prop. Shortly, we will see the props configuration in the child component's.tsfile.
Child component
Once we create the parent component, we create the child component using the command:
ng create child-component
Again, this command will create a folder child-component in the src/app/ directory. The folder will contain the .html, .css, .ts, and .spec.ts files.
It is essential to configure the child component to allow the parent component's HTML file to send data. The code for the child component's .ts file is given below:
import { Component,Input } from '@angular/core';@Component({selector: 'app-child-component',templateUrl: './child-component.component.html',styleUrls: ['./child-component.component.css']})export class ChildComponentComponent {@Input() person: any;}
Line 1: We import
Inputfrom@angular/core.Line 9: We declare our variable person using the
@Input()decorator, which allows the parent component to communicate data.
<div class="card" *ngIf="person"><img src={{person.img}} alt="Avatar" style="object-fit: contain; width: 150px;"><div class="container"><h4><b>{{person.name}}</b></h4><p>{{person.profession}}</p></div></div>
Line 1: We create a
divtag and use the*ngifdirective to check if thepersonvariable received the data from the parent component.Lines 2–5: Once we get the data from the parent component, we can extract the name, image, and profession using
person.name,person.img, andperson.profession.
Complete code
We can see the full code for the parent-component folder and child-component folder below. Click the "Run" button to see the code in action:
Conclusion
Angular enables us to pass data from parent to child components using the @Input() decorator.
Free Resources