Angular child event targets wrong parent component-CodePudding

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

<parent>
    <child-table id="table1">

    </child-table>
    <child-table id="table2">

    </child-table>
</parent>

Now the child-table component looks like this:

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

and all onThingChanged() does is this:

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

onThingChanged(changed: boolean)
    {
        this.thingChanged.emit(changed);
        this.populateTable();
    }

and toolbar's html looks like this:

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

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/app/app.component.html

CodePudding user response：

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