How to transfer data from parent to child component using Angular 8?

In Angular 8, to transfer data from the parent component to the child component, we use the @Input decorator. The @Input decorator is one of the property decorators in angular. Now, Let’s look into the steps of how the @Input decorator works from the parent component to the child component.

Prerequisites

First, we need some prerequisites before proceeding. Like

• Minimal knowledge on angular.

• Any IDE like WebStorm, Intellij or Visual studio/code installed.

• Angular CLI must be installed.

• Nodejs must be installed.

Steps

Here, I explained steps to transfer data from the parent to child component.

• First create angular project.

• Create parent and child components using NPM commands.

• Import @Input decorator in child component.

• Import @Input decorator in child component.

• Place the define @Input in HTML.

• Now, in parent component, need to create a tag with child component selector along with the property binding with the name of define @Input value.

• In parent component, assign a value for defined value.

Let’s make it clear in detailed steps.

Now, Let’s create angular project using NPM command. Like

npm new sampleProject

npm new sampleProject

npm g c parent

Create child component using NPM command. Like

npm g c child

Here, g means generate and c means component. We can also give command like

npm generate component componentName

We can create components manually in VS or any IDE. Otherwise we can use commands. When we use commands to generate component. It will create four files with the component name. One is for .ts file, second is .html file, third is. spec.ts file and finally .css file. Simplest way is using command line. Now let’s look into coding part.

Example

In child.component.ts file, write code like

import { Component, Input } from "@angular/core";
@Component({
   selector: "app-child",
   templateUrl: "./child.component.html",
   styleUrls: ["./child.component.css"]
})
export class ChildComponent {
   @Input() message = "";
   Constructor() {}
}

Here, we defined message with @Input decorator. Now, let’s add code in HTML file.

In child.component.html file,

<div id="child">
   <p>Child Component</p>
   <p id="messageFromParent">{{ message }}</p>
</div>

Now, define the data to send from the parent to the child component. Like,

In parent.component.ts file,

import { Component } from "@angular/core";
@Component({
   selector: "app-parent",
   templateUrl: "./parent.component.html",
   styleUrls: ["./parent.component.css"]
})
export class ParentComponent {
   constructor() {}
   parentMessage = "Message from the parent to the child";
}

In parent.component.html file,

<div id="child">
   <p>Child Component</p>
   <p id="messageFromParent">{{ message }}</p>
</div>

Remember here, message i.e. property binding same name we given in the child in the child component with defined @Input. Whatever name we mentioned for @Input, Same name we need to mention it in parent component with binding.

Whatever we assigned for parentMessage, that text will be accessed by the child component. That will displayed by {{ message }} expression.

We created the child and parent components. We defined data and written to display also.

Now, let’s import both components in main module i.e. app.module.ts file.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ChildComponent } from "./child.component";
import { ParentComponent } from "./parent.component";
@NgModule({
   declarations: [AppComponent, ChildComponent, ParentComponent],
   imports: [BrowserModule],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}

Here, we imported service class as providers. In @NgModule, we have four sections.

Declarations - Define imported components

Imports- Define imported modules

Providers- Define imported services

Bootstrap- Define root component to display data

Now let’s add parent selector in app-component.html to display the results

In app.component.html file

<div>
<p>Main page</p>
<app-parent></app-parent>
</div>

Output

Main page
Parent Component
Child Component
Message from the parent to the child

From the above, we learnt how to transfer data from the parent to the child component using @Input decorator. The Child Component decorates the property using the @Input Decorator. In the Parent Component, we use property binding to bind it to the Property or method of Parent Component.

Sravani Alamanda

Updated on: 21-Feb-2023

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started