Why Angular Material mat-horizontal-stepper and mat-stepper, on following step, first (click) does not work?

Question

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?

Answer 1

Found the issue:

Change the getTilesFloorItems() pattern; assign your tiles to a field and read it from there in the ngFor. Otherwise you're creating 2 sets of tiles instances.

export class QuestionsStepperComponent {
  public setTile(): void {
    console.log('hit');
  }

  tiles: any[] = [
    {
      type: 'tiles',
   ...

<div *ngFor="let tile of tiles; ...

Fixed stackblitz