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

Dattatray Arsule

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?

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

geetha geetha4y ago
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);
      }
}
+1
Satya Karki4y ago
https://stackoverflow.com/questions/67935374/how-to-share-the-data-from-parent-component-to-multiple-child-components-in-angu
+2
Rijwan Ansari4y ago
You can do by introducing service

Parent Compenent
constructor(private event:serviceFile){}
eventSubscriber:Subscription|any;
data:any;    //<- data that you want to send to child component
ngOnInit(){
  this.event.sendDataToChildComponent(data);  //<- Function inside service
}
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();
}
+3

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

"{{personname}}"

Master have {{personnames.length}} personnames