Angular- @Input() decorator

Introduction

Interaction between the components is important for sharing data in the Angular Application. In this article, we will discuss how to share data from the parent component to the child component.

How to share data from Parent Component to Child Component?

Let's see the below diagram,

@Input() Decorator in Angular

@Input() Decorator is used to share data from the parent to child components. Let's create Angular Application to explore this concept practically,

Step 1. Add Parent Component in the Angular application.

ng g c “parentComponent”

The component has been created.

Step 2. Create Child Component.

ng g c “childComponent”

Step 3. Once a child component is created, add the code below in the parent component Html ("parent-component.component.html").

4.	<H1>Parent Component</H1>
5.	
6.	<app-child-component></app-child-component>

<app-child-component> is a child component selector.

Step 4. Now we will declare a property called "name" in the parent component ts file("parent-component.component.ts"). We will pass this property's value from parent to child component.

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent {
  public name ="Kirtesh Shah from Parent Component";
}

Step 5. Declare the Property called "parentData" in the child component ts file ("child-component.component.ts") and decorate the property with ()input decorator.

Note. the @input() decorator is part of the @angular/core package and hence needs to be imported.

6.	import { Component, Input } from '@angular/core';
7.	
8.	@Component({
9.	  selector: 'app-child-component',
10.	  templateUrl: './child-component.component.html',
11.	  styleUrls: ['./child-component.component.css']
12.	})
13.	export class ChildComponentComponent {
14.	@Input()
15.	  public ParentData="";
16.	}

Step 6. Now in the "parent-component.component.html" file, we will add the below code.

<H1>Parent Component</H1>

<app-child-component [ParentData]="name"></app-child-component>

 In the above code,

• <app-child-component> We have added the "ParentData" Property declared in the child component with @input() decorator
• Assign a value of the "name" property declared in the parent component to the "ParentData" property.

Step 7. Let's execute the application and see the output.

Output

Let's assume we want to use a different name in the child component property. We can achieve that using allies in the @input decorator.

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('ParentData')
  public personName="";
}

In the above code, we have declared property with a different name, "person Name".

Add the below code in the "child-component.component.html" file.

<h2>Child Component</h2>
Hello {{personName}}

Execute the application again and see the output

Summary

That's all for this article. This article teaches us how to pass data from the Parent component to the child component. In the next article, we will learn how to pass data from the child component to the parent component.