diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index 1df71a48d1fa..8438de47e8a1 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -45,8 +45,8 @@ This is the HTML template of our custom stepper component:
 
   <footer class="step-navigation-bar">
     <button class="nav-button" cdkStepperPrevious>&larr;</button>
-    @for (step of steps; track step) {
-      <button class="step" [class.active]="selectedIndex === $index" (click)="onClick(i)">
+    @for (step of steps; track step; let i = $index) {
+      <button class="step" [class.active]="selectedIndex === i" (click)="onClick(i)">
         Step {{i + 1}}
       </button>
     }