A method to simultaneously retrieve all emitted values from multiple EventEmitters in Angular 7

Question

A method to simultaneously retrieve all emitted values from multiple EventEmitters in Angular 7

I am facing a scenario where I have a parent component that consists of multiple child components. Each child component may differ from the others, creating a diverse structure within the parent component. Here's an example:

                          --- Parent ---
                                |
 Child1(component1) --- Child2(component1) --- Child3(component5) .....

My goal is to be able to retrieve messages simultaneously from all child components when a button in the parent component is clicked. While I can successfully receive values from individual child components using EventEmitter, I am uncertain about how to gather information from all child components at once.

Edit:

The challenge lies in dynamically creating my child components as shown below:

@ViewChild('component1Container', { read: ViewContainerRef }) component1ContainerRef: ViewContainerRef;
@ViewChild('component2Container', { read: ViewContainerRef }) component2ContainerRed: ViewContainerRef;

angular typescript angular7 angular-event-emitter

Answer 1

Answer №1

In the parent template, you have the option to access your components using their ids:

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick(child1.aProp, child2.anotherProp, child3.thirdProp)"></button>
`})
class ParentComponent {
  onButtonClick(aProp: string, anotherProp: number, thirdProp: string): void { ... }
}

Alternatively, you can utilize the @ViewChild directive to directly access child components from within the parent component:

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick()"
`})
class ParentComponent {
  @ViewChild("child1", {static: false}) child1!: Child1Component;
  @ViewChild("child2", {static: false}) child2!: Child2Component;
  @ViewChild("child3", {static: false}) child3!: Child3Component;

  onButtonClick(): void {
   console.log(this.child1.aProp, this.child2.anotherProp, this.child3.thirdProp);
  }
}

Answer 2

In the parent template, you have the option to access your components using their ids:

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick(child1.aProp, child2.anotherProp, child3.thirdProp)"></button>
`})
class ParentComponent {
  onButtonClick(aProp: string, anotherProp: number, thirdProp: string): void { ... }
}

Alternatively, you can utilize the @ViewChild directive to directly access child components from within the parent component:

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick()"
`})
class ParentComponent {
  @ViewChild("child1", {static: false}) child1!: Child1Component;
  @ViewChild("child2", {static: false}) child2!: Child2Component;
  @ViewChild("child3", {static: false}) child3!: Child3Component;

  onButtonClick(): void {
   console.log(this.child1.aProp, this.child2.anotherProp, this.child3.thirdProp);
  }
}

A method to simultaneously retrieve all emitted values from multiple EventEmitters in Angular 7

Answer №1

Similar questions

Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Angular 8 httpClient experiencing asynchronous execution issues

What is the process for setting a default checkbox as checked in Angular 6?

AngularJS - Sending event to a specific controller

Error: Unable to access $rootScope in the http interceptor response function

Using an array of objects as a data source for the Material Angular table

What is the method for importing the "numeric" library version "^1.2.6" into an Angular project?

What is the correct way to set up a custom class instance with specific parameters at the top level?

Guide on the correct way to develop a Typescript NPM package accompanied by declarations?

Upon updating from Angular5 to Angular7, the slice pipe seems to be stuck in an endless loop

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

Facing Issues with HTTP Headers in Express or Node?

Is there a specific reason why the app.module.ts file is not generated when I initialize a new Angular application?

Reactive sidenav in action with Angular

Issue encountered while generating a fresh migration in TypeORM with NestJs utilizing Typescript

Setting the Formgroup status to Invalid will only occur if there are errors in multiple fields, not just one

Dealing with nullable objects in Typescript: Best practices

Tips for preserving images while browsing a website built with Angular single-page application

Beware of the 'grid zero width' alert that may appear when utilizing ag-Grid's sizeColumnsToFit() function on multiple ag-Grids that are shown within a tab menu

Encountering an issue when using the Google authentication provider with Next.js version 13