Pass data from the Parent to child component using Input Binding

Pass data from the Parent to child component using Input Binding

In an Angular application, there will be multiple reusable components and they will more often communicate with each other and pass data. 

There will be scenarios where you want to pass the data from the parent component to the child component and also from the child component to the parent component.

In this post, you will learn how to pass data from the parent to the child component. As a basic example, we will pass a single user first name and the last name to the child component and render it.

We will use @Input decorator to pass inputs to the child component.

Parent Component 

app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  userFirstName = "Rohan"
  userLastName = "Sharma"

  userId = "Rohan007"

}

we will bind these properties to the child component using property binding.

app.component.html

<app-user-input [firstname] = "userFirstName" [lastname] = "userLastName" [user-id] ="userId"> </app-user-input>

"app-user-input" is the selector name in the child component and we are binding the properties of parent component using the property binding.

Child Component

user-input.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})
export class UserInputComponent {

  @Input() firstname: String ;
  @Input() lastname: String ;

  @Input('user-id') id: String;

}

Note: For the id property we are using an optional name in the @input decorator i.e "user-id". you can do this when you don't want to give some name of the property to the parent component for input binding.

user-input.component.html

<label>The User Details with Id: {{id}} </label> 

<p>
    {{firstname}} {{lastname}}
</p>

In the child component, we have got the input fields and bind them using Interpolation.

Output:

Pass a list of users from the Parent to the child component

Create a new Interface where we will declare the User. To create a new interface, use a command in Angular CLI

ng generate interface User

Write the following properties in the interface:

user.ts

export interface User {

    firstName: string
    lastName : string
    Id : string

}

Create an Array of User in Parent component and pass it to the Child component

Here we are not getting list of users from the server, Later in this tutorial, we will connect our Angular app to the server and get the users from the database. 

But, for the current example, we will create a hard code array of users and pass it to the child component.

export interface User {

    firstName: string
    lastName : string
    Id : string

}

Parent Component

app.component.ts

import { Component } from '@angular/core';
import { User } from './user';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  lstofUsers: User[] = [
    {
      firstName:"Raman",
      lastName : "Verma",
      Id: "Raman001"
    },

    {
      firstName:"Anurag",
      lastName : "Gupta",
      Id: "Anu002"
    },

    {
      firstName:"Rohan",
      lastName : "Sharma",
      Id: "Rohan003"
    }

  ]

}

As you can see we have created a dummy list of users. You need to first import the user interface so that we can create an array of the user objects and bind this list to the child component input field using property binding.

app.component.html

<app-user-input [users] = "lstofUsers" > </app-user-input>

Child Component

user-input.component.ts

import { User } from './../user';

import { Component, OnInit, Input } from '@angular/core';


@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})
export class UserInputComponent {

  @Input() users: User[] ;

}

You need to import the Interface in the child component also because you have to define the type of the input field i.e User[ ].

Now, as we have created the Input field in the child component, we will loop through the users using the Angular ngFor directive in the child component template and print the users on the browser.

user-input.component.html

<label>List of Users </label> 

<ul>

    <li *ngFor="let user of users">

        {{user.Id}} - {{user.firstName}} {{user.lastName}}

    </li>

</ul>

Output: