docs(cdk/stepper): refactor example for consistency with other examples

 (angular#20383)

Author: nielsr98

src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts

@@ -14,10 +14,10 @@ export class CdkCustomStepperWithoutFormExample {}
   selector: 'example-custom-stepper',
   templateUrl: './example-custom-stepper.html',
   styleUrls: ['./example-custom-stepper.css'],
-  providers: [{ provide: CdkStepper, useExisting: CustomStepper }]
+  providers: [{provide: CdkStepper, useExisting: CustomStepper}]
 })
 export class CustomStepper extends CdkStepper {
-  onClick(index: number): void {
+  selectStepByIndex(index: number): void {
     this.selectedIndex = index;
   }
 }

src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html

@@ -3,17 +3,15 @@
     <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
   </header>
 
-  <div [style.display]="selected ? 'block' : 'none'">
-    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
-  </div>
+  <div [ngTemplateOutlet]="selected ? selected.content : null"></div>
 
   <footer class="example-step-navigation-bar">
     <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
     <button
       class="example-step"
+      [class.example-active]="selectedIndex === i"
       *ngFor="let step of steps; let i = index"
-      [ngClass]="{ 'example-active': selectedIndex === i }"
-      (click)="onClick(i)"
+      (click)="selectStepByIndex(i)"
     >
       Step {{ i + 1 }}
     </button>