title: Angular CDK: Apply animations to Angular custom stepper on step change
body: <p>I am stuck with animating the step change of the Angular material custom stepper using the CDK.
  I have followed the <a href="https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper" rel="nofollow noreferrer">tutorial</a> on how to implement the custom stepper. </p>
  
  <p>I have the demo <a href="https://stackblitz.com/edit/angular-cdk-stepper-example-solution?file=src%2Fapp%2Fmy-stepper%2Fmy-stepper.component.html" rel="nofollow noreferrer">here</a></p>
  
  <p>My template looks like:</p>
  
  <pre><code>&lt;section class="container"&gt;
   &lt;header&gt;
      &lt;h2&gt;Step {{selectedIndex + 1}}/{{steps.length}}&lt;/h2&gt;
      &lt;div&gt;
        &lt;button class="pure-button" cdkStepperPrevious&gt;&amp;larr;&lt;/button&gt;
        &lt;button
        class="pure-button"
        *ngFor="let step of steps; let i = index;"
        [ngClass]="{'pure-button-primary': selectedIndex === i}"
        (click)="onClick(i)"
    &gt;
      Step {{i + 1}}
        &lt;/button&gt;
        &lt;button class="pure-button" cdkStepperNext&gt;&amp;rarr;&lt;/button&gt;
       &lt;/div&gt;
     &lt;/header&gt;
  
   &lt;div [@stepTransition]="_getAnimationDirection(current)" *ngFor="let step of _steps; let i = index"&gt;
    &lt;div  [ngTemplateOutlet]="selected.content"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>And my component TS file look like:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CdkStepper } from '@angular/cdk/stepper';
  import {
       trigger,
       state,
       style,
       animate,
       transition,
   } from '@angular/animations';
  
   @Component({
     selector: 'app-my-stepper',
     templateUrl: './my-stepper.component.html',
     styleUrls: ['./my-stepper.component.css'],
     providers: [{ provide: CdkStepper, useExisting: MyStepperComponent }],
    animations: [trigger('stepTransition', [
        state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
        state('current', style({transform: 'none', visibility: 'visible'})),
        state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
        transition('* =&gt; *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
     ])]
  })
   export class MyStepperComponent extends CdkStepper implements OnInit {
      current = 0;
  
      onClick(index: number): void {
      this.current = index;
       this.selectedIndex = index;
    }
  
    ngOnInit() {   
        console.log(this._getFocusIndex())
     }
  
  }
  </code></pre>
  
  <p>The animation only works for the last step, the reason is that the animation state(previous, current, next)value does not change onClick.</p>
  
  <p>How can I achieve this? any idea is much appreciated, thanks.</p>
  
  <p><strong>UPDATE</strong>
  Check the stackblitz repo for the latest code</p>