title: How to create a progress wizard using angular material stepper
body: <p>I am trying to create a progress wizard using angular material stepper. I get JSON data that looks like this:</p>
  <pre><code>{
    &quot;step&quot;:1,
    &quot;info&quot;:&quot;this is some order data&quot;,
    &quot;status&quot;:true
  },
   {
    &quot;step&quot;:2,
     &quot;info&quot;:&quot;this is some order data&quot;,
    &quot;status&quot;:true
  },
   {
    &quot;step&quot;:3,
    &quot;info&quot;:&quot;this is some order data&quot;,
    &quot;status&quot;:false
  }
  </code></pre>
  <p>If the status is true, then it should display green; if it's false, it should display grey color along with some info that I can display here. The stepper usually works with onlick only but I need it to work based on JSON status. Below is my code:</p>
  <pre><code>&lt;mat-horizontal-stepper&gt;
  
    &lt;mat-step label=&quot;Step 1&quot;&gt;
      Step 1 content
    &lt;/mat-step&gt;
  
    &lt;mat-step label=&quot;Step 2&quot;&gt;
      Step 2 content
    &lt;/mat-step&gt;
  
    &lt;mat-step label=&quot;Step 3&quot;&gt;
      You are now done.
    &lt;/mat-step&gt;
    
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw</a></p>