How to use @input in Angular
@Input
Decorator that marks a
class field as an input property and supplies configuration metadata.
The input property is bound to a DOM property in the template. During change
detection, Angular automatically
updates the data property with the DOM property's value.
Let's take an example to understand it better 😊
We need to pass data from parent component to child component using
@input
Step 1: Create a parent component by using the below code : parent.component.html
<h2>This is parent component</h2>
<label for="cars">Choose a Type:
</label>
<!-- onChange($event) -->
<select id="cars"
(change)="selectedId = $event.
target.value">
<option value="audi"
>Select</option>
<option value="0001"
>Donut</option>
<option value="0002"
>Mango</option>
<option value="0003"
>Apple</option>
</select>
<br>
----------------------------------------------------------------
<app-child [selectedId] ="selectedId"></app-child>
Step 2: Use below code in parent.component.ts
import { Component, OnInit } from '@angular/core' ;
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
selectedId = 0;
constructor() { }
ngOnInit(): void {
}
onChange(event) {
console.log(event.
target.value);
this.selectedId =
event.target.value;
}
}
Step 3 : Create a child
component by using the below code :child.component.html
<div *ngIf="seletedData">
<h2> This is Child Component</h2>
<table>
<thead>
<tr>
<th>
Name :
</th>
<th>
{{seletedData.name}}
</th>
</tr>
<tr>
<th>
Ppu :
</th>
<th>
{{seletedData.ppu}}
</th>
</tr>
<tr aria-colspan="2">
Batters & Topping
</tr>
</thead>
<tbody>
<tr *ngFor="let batter of seletedData.batters.batter">
<td>
{{batter.id}}
</td>
<td>
{{batter.type}}
</td>
</tr>
<tr *ngFor="let batter of seletedData.batters.topping">
<td>
{{batter.id}}
</td>
<td>
{{batter.type}}
</td>
</tr>
</tbody>
</table>
</div>
Step 4: Use below code
in child.component.ts
import { Component, OnInit, SimpleChanges, OnChanges, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
// tslint:disable-next-line:indent
dummyData = [
{
id: '0001',
type: 'donut',
name: 'Cake',
ppu: 0.55,
batters:
{
batter:
[
{ id: '1001', type: 'Regular' },
{ id: '1002', type: 'Chocolate' },
{ id: '1003', type: 'Blueberry' },
{ id: '1004', type: 'Devil\'s Food' }
]
},
topping:
[
{ id: '5001', type: 'None' },
{ id: '5002', type: 'Glazed' },
{ id: '5005', type: 'Sugar' },
{ id: '5007', type: 'Powdered Sugar' },
{ id: '5006', type: 'Chocolate with Sprinkles' },
{ id: '5003', type: 'Chocolate' },
{ id: '5004', type: 'Maple' }
]
},
{
id: '0002',
type: 'Mango',
name: 'Raised',
ppu: 0.55,
batters:
{
batter:
[
{ id: '1001', type: 'Regular' }
]
},
topping:
[
{ id: '5001', type: 'None' },
{ id: '5002', type: 'Glazed' },
{ id: '5005', type: 'Sugar' },
{ id: '5003', type: 'Chocolate' },
{ id: '5004', type: 'Maple' }
]
},
{
id: '0003',
type: 'Apple',
name: 'Old Fashioned',
ppu: 0.55,
batters:
{
batter:
[
{ id: '1001', type: 'Regular' },
{ id: '1002', type: 'Chocolate' }
]
},
topping:
[
{ id: '5001', type: 'None' },
{ id: '5002', type: 'Glazed' },
{ id: '5003', type: 'Chocolate' },
{ id: '5004', type: 'Maple' }
]
}
];
// tslint:disable-next-line:no-input-rename
@Input('selectedId') selectedId;
seletedData;
constructor() { }
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.selectedId) {
console.log( 'Received input from parent
component ->', this.selectedId);
this.seletedData = this.dummyData.
find(data =>
data.id === this.selectedId);
}
}
}
Step 5: use ng
serve command and open http://localhost:4200/ to get the result
Comments
Post a Comment