@Input() decorator for Angular

Interaction between components is essential for data exchange in the Angular Application. This post will go through how to pass data from the parent component to the child component.

How can I transfer data from the Parent Component to the Child Component?

In Angular, the @Input() Decorator is used to provide data from the parent to the child components. Let’s make an Angular Application to practise this topic.

Step 1: In the Angular application, add a Library Component.

ng g c libraryComponent

Step 2. Create Book Component.

ng g c bookComponent

Step 3: After you’ve established a child component, paste the code below into the parent component’s HTML (“library-component.component.html”).

<h1>Library Component</h1>
<app-book-component></app-book-component>

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

Step 4: In the library component ts file (“library-component.component.ts”), we will specify a “name” attribute. The value of this attribute will be passed from library to book component.

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

@Component({
  selector: 'app-library-component',
  templateUrl: './library-component.component.html',
  styleUrls: ['./library-component.component.css']
})
export class LibraryComponentComponent {
  public name ="ABC";
}

Step 5: Declare the “parentData” property in the book component ts file (“book-component.component.ts”) and decorate it with the ()input decorator.

It should be noted that the @input() decorator is part of the @angular/core package and so must be loaded.

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

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

export class BookComponentComponent {
  @Input() public ParentData="";
}

Step 6. Now in the “library-component.component.html” file, we will add the below code.

<H1>Library Component</H1>

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

In the above code,

• <app-book-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.

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-book-component',
  templateUrl: './book-component.component.html',
  styleUrls: ['./book-component.component.css']
})
export class BookComponentComponent {
@Input('ParentData')
  public personName="";
}

We declared a property called “person Name” in the preceding code.

In the “book-component.component.html” file, paste the following code.

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