title: How to destroy components in mat-stepper
body: <p>I have some problems with my <code>mat-stepper</code>, where each step is a new component.</p>
  <p>My problem is that <code>ngOnDestroy()</code> is not being triggered on each steps (components), when going back and forth in my <code>mat-stepper</code>.</p>
  <p>My stepper is as follows:
  HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-horizontal-stepper [selectedIndex]=&quot;selectedIndex&quot; linear labelPosition=&quot;bottom&quot; #stepper fxLayoutAlign=&quot;center center&quot; fxLayout=&quot;column&quot;&gt;
      &lt;mat-step [stepControl]=&quot;step1&quot;&gt;
          &lt;ng-template matStepLabel&gt;{{ stepCaptions[0] }}&lt;/ng-template&gt;
          &lt;app-step1&gt;&lt;/app-step1&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]=&quot;step2&quot;&gt;
          &lt;ng-template matStepLabel&gt;{{ stepCaptions[1] }}&lt;/ng-template&gt;
          &lt;app-step2&gt;&lt;/app-step2&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]=&quot;step3&quot;&gt;
          &lt;ng-template matStepLabel&gt;{{ stepCaptions[2] }}&lt;/ng-template&gt;
          &lt;app-step3&gt;&lt;/app-step3&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]=&quot;step4&quot;&gt;
          &lt;ng-template matStepLabel&gt;{{ stepCaptions[3] }}&lt;/ng-template&gt;
          &lt;app-step4&gt;&lt;/app-step4&gt;
      &lt;/mat-step&gt;
      &lt;mat-step [stepControl]=&quot;step5&quot;&gt;
          &lt;ng-template matStepLabel&gt;{{ stepCaptions[4] }}&lt;/ng-template&gt;
          &lt;app-step5&gt;&lt;/app-step5&gt;
      &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  <p>Typescript:</p>
  <pre class="lang-js prettyprint-override"><code>@ViewChild('stepper', { static: false }) stepper;
  </code></pre>
  <p>Am I missing something?</p>