Angular 5: Passing an array from child to parent component

Question

I have a child and a parent component.

I want to pass an array from the child component and display it in the parent component.

I first started with:

@Input data: string[];

Then in ngOnInit I have:

ngOnInit() {
   this.data = ['name1', 'name2', 'name3'];
}

Then I have the parent component:

<app.parent></app.parent>

My question is: how do I display this data in the parent component?

Answer 1

You should be using @Output() as below,

@Output() data: EventEmitter<string[]> = new EventEmitter<string[]>();

ngOnInit() {
   this.data.emit(['name1', 'name2', 'name3']);
}

you should be handling the event in your parent as

<app.parent (data)="eventHandler($event)"></app.parent>

eventHandler(event:string[]){
     this.childData = event;
}

Display the childData in your component as

{{childData}}