pass data from parent to multiple child views at a time in angular

Question

I had asked question in interview like how to pass data from parent component to multiple child components at a time?

I know that we can use the @Input decorator in child component to fetch data from parent component. However not sure

to fetch data from parent to all child components of that parent component at a time. I provided the answer like repeat the same procedure to other child components. Can anyone please explain in details?

Rijwan Ansari · Answer

You can do by introducing service Parent Compenent constructor( private event:serviceFile){} eventSubscriber:Subscription|any; data:any; // ngOnInit(){ this .event.sendDataToChildComponent(data); // } Servicefile subjectName = new Subject (); sendDataToChildComponent(data:any){ this .subjectName(data).next(); } Child component constructor( private event:serviceFile){} eventSubscriber:Subscription|any; ngOnInit(){ this .event.subjectName.subscribe((data:any)=>{ console.log(data) } } ngOnDestroy(){ if ( this .eventSubscriber) this .eventSubscriber.unsubscribe(); }

Satya Karki · Answer

https://stackoverflow.com/questions/67935374/how-to-share-the-data-from-parent-component-to-multiple-child-components-in-angu

geetha geetha · Answer

Using the @Input directive to pass data from parent to child view in angular. Getting the child component: import { Component, Input } from '@angular/core' ; @Component({ selector: 'app-personname-child' , template: ' "{{personname}}" ' }) export class PersonChildComponent { private _personname = '' ; @Input() set personname(personname: string) { this ._personname = (personname && personname.trim()) || ' ' ; } get personname(): string { return this ._personname; } } This is a parent component: import { Component } from '@angular/core' ; @Component({ selector: 'app-person-parent' , template: ` Master have {{personnames.length}} personnames "let personname of personnames" [personname]= "personname" > }) export class PersonParentComponent { personnames = [ 'Geetha' , ' Vinitha ' , ' Daril ' ]; } Passing the data from parent to child: Let's consider an example where we are emitting the sum value from the childcomponent. import { Component, EventEmitter, Output } from '@angular/core' ; @Component({ selector: 'childcomponent' , template: ` class = 'btn btn-primary' (click)= "changeValue()" >Click me ` }) export class parentComponent { @Output() valueChange = new EventEmitter(); sum = 0; changeValue() { // You can give any function name this .sum = this .sum + 10; this .valueChange.emit( this .sum); } } emit an event and pass a parameter to the event. In the below example, we are emitting a value from parentComponent to childComponent. Displaying the sum value from ChildComponent. import { Component, EventEmitter, Output } from '@angular/core' ; @Component({ selector: 'childcomponent' , template: ` class = 'btn btn-primary' (click)= "changeValue()" >Click me ` }) export class parentComponent { @Output() valueChange = new EventEmitter(); sum = 0; changeValue() { // You can give any function name this .sum = this .sum + 10; this .valueChange.emit( this .sum); } }