angular

How to use @input Decorator in Angular 6,7

How to use @input Decorator in Angular 6,7

In this tutorial, we will learn how to use Input decorator in angular and using this we can pass data from parent component to child component.

So let’s get started…

What is Input decorator?

Input decorator is used to creating custom properties, It makes available properties for other components.

Step by Step Guide for Passing Data from Parent to Child Component in Angular:

Step -1: Create New Project

Create Blank Project in angular using below command, Skip this step if you have already:

ng new angularDemo

Step-2: Add Components

Now add two new components with name parent and child component, using below command

ng new g c parent 
ng new g c child

Step-3: Add parent Component

To render our parent component HTML we need to include it to app.component.html file as HTML tag as shown below:

<div style="text-align:center">
	<h1>
		Welcome to {{ name }}!
	</h1>
	<hr>
	<app-parent></app-parent>
</div>

Step-4: HTML for Parent and Child Component

Now suppose we have a scenario where we have to change the price from parent component and it should be effect on child component, so let’s do HTML for this as below:

HTML for parent component:

<h1>
  Parent component
</h1>

<input type="text"/>

<app-child></app-child>

 

HTML for child component:

<h1>
  Child component
</h1>
<h4>
  Current Price : {{newPrice}}
</h4>

In Parent HTML code we have added <app-child> tag to use it as child component.

 Step-5: Pass data using Input decorator

 

Now, to make able child component to receive value from parent component we need to use Input decorator as follows in child.component.ts, see below code:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() public newPrice: string = '500';

  ngOnInit() {
  }

}

 

Step-6: Reference to the child component value

 

Next, we need to make reference to the child component value, so update HTML as below in parent.component.ts as below:

<input type="text" #price (keyup)="onchange(price.value)"/>

<app-child [newPrice]="currentPrice"></app-child>

 

Now our Application is ready, run application using ng serve command then go to a browser it will look like this:

 

 

angular-input-decorater
angular-input-decorater

 

 

Now you can update any value from parent component input it will also change on child component.

So, using Input decorator we can pass data from the parent component to the child component.

 

View Live Demo

 

 

 

 

 

 

 

 

 

 

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment