[SOLVED] Angular child event targets wrong parent component


I have some nested angular components that are giving me some problems with Event Emitters. The structure goes something like this:

    <child-table id="table1">

    <child-table id="table2">


Now the child-table component looks like this:

<toolbar (thingChanged)="onThingChanged($event)">

and all onThingChanged() does is this:

@Output() thingChanged: EventEmitter<boolean> = new EventEmitter<boolean>(); //at global level
@Input() thingValue: boolean; //also global

onThingChanged(changed: boolean)

and toolbar’s html looks like this:

<mat-slide-toggle id="thingValue"
        [(ngModel)]='thingValue' (ngModelChange)='onThingChanged($event)'>

What I see when this app runs is two tables with mat-slide toggles on both. However, for some reason, if I click on the toggle for the table on the right (in this case the one with id=table2), it always changes toggles the slider for the table on the left, table1.

The behavior I expect is that when I click on the toggle for table2, I see table2 call it’s own populateTable() method, not table1’s.

If anyone has any suggestions as to why this might be happening, I’d appreciate your help.

EDIT: Here’s a stackblitz that reproduces the problem. https://stackblitz.com/edit/angular-ivy-mhiihu?file=src%2Fapp%2Fapp.component.html


This is a bit of a guess, but if you have the exact same id on the toggle component could that be affecting it e.g. <mat-slide-toggle id="thingValue"

Maybe make this id dynamic

Answered By – Drenai

Answer Checked By – Robin (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *