I have a weard problem with my (click)
event, where second click is triggered in Angular code:
<label class="selectLabel">Select floor tiles:</label>
<div class="center row itemListedConainer scroller">
<div *ngFor="let tile of getTilesFloorItems(); let i = index" class="itemListed col"
(click)="setTile()">
</div>
</div>
After debugging and many trials I figured out that this is related to @angular/material/stepper
, and after going to the following step, first (click)
does not work.
I managed to reproduce the problem in this Stackblitz: link
Please note, that when you click any green tile within first step
, you will get console.log('hit')
, even first time. And within 2nd step
, the first click does not log in the console.
What is the reason and how to deal with this?
Found the issue:
Change the
getTilesFloorItems()
pattern; assign yourtiles
to a field and read it from there in thengFor
. Otherwise you're creating 2 sets oftiles
instances.Fixed stackblitz