Angular Material Stepper: Skipping newly rendered steps when using Next button

[Degretor]

I have a mat horizontal stepper, I need to show some steps only when some condition applies (doing this with *ngIf). When the condition applies, and the step is present, the Next button skips it visually according to the highlight (the first previously present step will be highlighted), but the content of the mat-step will reflect properly the newly rendered mat-step.

Similar issue: #19272

Link to stackblitz:
https://angular-d62jgy.stackblitz.io

Expected behavior

Pressing Next to increment the selected step programmatically should mark the next step selected in the UI.

Actual behavior

Pressing Next skips the new (2-3) mat-steps and marks the first not newly introduced mat-step (4). The content however reflects correctly the newly introduced step's (2) content.

Environment

• Angular: 12.2.4
• Browser(s) Tested: Chrome, Firefox, Edge
• Operating System: Windows 10

How to reproduce (following the stackblitz link)

• click "Show Thyself!"
• click "Next"
• note that gray highlight is on the fourth step instead of second
• click "Next"
• note that gray highlight is on the second step instead of third
• click "Next"
• note that gray highlight is on the third step instead of fourth

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}