Angular Sharing data among components Send data from parent component to child component via data binding using @Input
Example
parent.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'parent-example',
templateUrl: 'parent.component.html',
})
export class ParentComponent {
mylistFromParent = [];
add() {
this.mylistFromParent.push({"itemName":"Something"});
}
}
parent.component.html:
<p> Parent </p>
<button (click)="add()">Add</button>
<div>
<child-component [mylistFromParent]="mylistFromParent"></child-component>
</div>
child.component.ts:
import {Component, Input } from '@angular/core';
@Component({
selector: 'child-component',
template: `
<h3>Child powered by parent</h3>
{{mylistFromParent | json}}
`,
})
export class ChildComponent {
@Input() mylistFromParent = [];
}
