How to create a progress wizard using angular material stepper

Question

I am trying to create a progress wizard using angular material stepper. I get JSON data that looks like this:

{
  "step":1,
  "info":"this is some order data",
  "status":true
},
 {
  "step":2,
   "info":"this is some order data",
  "status":true
},
 {
  "step":3,
  "info":"this is some order data",
  "status":false
}

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:

<mat-horizontal-stepper>

  <mat-step label="Step 1">
    Step 1 content
  </mat-step>

  <mat-step label="Step 2">
    Step 2 content
  </mat-step>

  <mat-step label="Step 3">
    You are now done.
  </mat-step>
  
</mat-horizontal-stepper>

https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw

score 1 · Accepted Answer · answered Jun 23 '20 at 18:58

1

In mat-step pass the status value. In your mat-step, add completed and state

<mat-step [completed]="status" [state]="state"> So that when status is true mat-step is completed and can also manipulate state in component.ts so that it is done when status is true

Refer : How to show that the last mat-step is complete in mat-stepper?

answered Jun 23 '20 at 18:58

Shradha

59
3

for me it giving issue can u change it in my stackblitz ? – Madpop Jun 23 '20 at 19:07
https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw giving me issues – Madpop Jun 23 '20 at 19:09
Please check now. For now I have straight away added true false. But now that you see the behaviour, try to pass boolean value from JSON respectively. – Shradha Jun 23 '20 at 19:14
where ? in stackblitz – Madpop Jun 23 '20 at 19:16
Yes.https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw?file=src%2Fapp%2Fapp.component.ts – Shradha Jun 23 '20 at 19:18
nothing is there can u modify here in this https://stackblitz.com/edit/angular-angular-material-stepper-p4zkqw – Madpop Jun 23 '20 at 19:20
Changed there only. Can you check if it is visible now.Else I can paste code here – Shradha Jun 23 '20 at 19:30
app.component.html Step 1 content Step 2 content You are now done. – Shradha Jun 23 '20 at 19:33
app.compoenent.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; constructor(private _formBuilder: FormBuilder) {} ngOnInit() { } } – Shradha Jun 23 '20 at 19:34

How to create a progress wizard using angular material stepper

1 Answers1