title: how to make active previous all steps of selectedIndex step using angular material stepper and angular 6
body: <p>I have use angular material stepper and i need to activate all the previous steps till selectedIndex step in angular 6. I already tried by using linear stepper but i getting only active step for selectedIndex not for all previous index .Examble i have 5 steps and i select the 3rd one, I getting only 3 rd step in actively remaining 1st &amp;2nd steps are inactive , I need to activate the 1st,2nd,3rd steps</p>
  <p>angular 6 , angular material 6</p>
  <h1>in html</h1>
  <pre><code>&lt;div class=&quot;col-lg-7&quot; *ngIf=&quot;!process&quot;&gt;
                             &lt;mat-horizontal-stepper [linear]=&quot;isLinear&quot; 
   [selectedIndex]=&quot;currentStep&quot; #stepper&gt;
                               &lt;ng-container *ngFor=&quot;let step of steps&quot;&gt;
                                     &lt;ng-template matStepperIcon=&quot;home&quot;&gt;
                                         &lt;mat-icon&gt;home&lt;/mat-icon&gt;
                                       &lt;/ng-template&gt;
                                 &lt;mat-step  [editable]=&quot;isEditable&quot;&gt;
                                   &lt;ng-template matStepLabel&gt;{{step}}&lt;/ng- 
      template&gt;
                                 &lt;/mat-step&gt;
                               &lt;/ng-container&gt;
                             &lt;/mat-horizontal-stepper&gt;
                           &lt;/div&gt;  
  </code></pre>
  <h1>in ts</h1>
  <pre><code>```
  isLinear = true;
        process: Boolean;
        steps = [ &quot;Ordered&quot;, &quot;Packed&quot;, &quot;Shipped&quot;, 'Transit', &quot;Delivered&quot; ];
        this.process = true;
          setTimeout(() =&gt; {
            this.currentStep = 2;
            this.process = false;
          }, 1500);
  </code></pre>
  <pre><code>
  I expected first three steps are active mode but i got only 3rd step in active mode
  </code></pre>