CODEWITHSUNDEEP
htmlcssangularangular8
NrJ
NrJ

Reputation: 105

how to change value of step progress bar dynamically

I have step progress bar in my angular app. i used a json to change the values dynamically. i couldn't find a way to change the value for step progress bar . when i used change the value the step progress bar is not working properly. please help me to find out a way

css code


@media (max-width: 576px) {
  .multi-steps-wrap {
    margin: 0;
  }
}
.multi-steps-wrap .multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.multi-steps-wrap .multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #3cba9f;
  font-size: 12px;
  z-index: 1;
}
.negative {
  border-color: red;
}
.multi-steps-wrap .multi-steps > li:before {
  content: "✓";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 46px;
  height: 46px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-width: 2px;
  border-style: solid;
  border-color: #3cba9f;
  border-radius: 50%;
}
.multi-steps-wrap .multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #3cba9f;
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: -1;
}
.multi-steps-wrap .multi-steps > li:last-child:after {
  display: none;
}
.multi-steps-wrap .multi-steps > li:last-child.is-active:before {
  content: "✓";
}
.multi-steps-wrap .multi-steps > li:first-child.is-active:before {
  content: "✓";
}
.multi-steps-wrap .multi-steps > li.is-active:before {
  background-color: #fff;
  border-color: #3cba9f;
}
.multi-steps-wrap .multi-steps > li.negative:before {
  background-color: red;
  border-color: red;

  color: white;
}
.multi-steps-wrap .multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps-wrap .multi-steps > li.is-active ~ li:before {
  background-color: #eee;
  border-color: #fff;
}

html code

<div class="product" *ngFor="let item of status;let i=index;">

          <div class="product-image">
            <img [src]="item.photo" >
          </div>
            <div class="product-title">{{item.name}}</div>
          <div class="product-price"><b>{{item.price}}</b></div>  
          <div class="product-quantity"><b>{{item.quantity}}</b></div>
          <div class="product-line-price"><b>{{item.price}}</b></div><br>
          <div>
            <div class="row multi-steps-wrap">
              <ul class="list-unstyled multi-steps">
                <li class="job-status job-created">processing</li>
                <li class="job-status job-inprogress is-active negative">Packed</li>
                <li class="job-status job-completed ">Shipped</li>
                <li class="job-status job-closed">Delivered</li>

              </ul>
            </div>
</div>

ts code

 loadData(){
    this.service.getOrderStatus().subscribe((data:any)=>{
      this.status=data
    })
  }

my json is

[   
    {   
        "name":"Pinpont Pen",
        "photo":"assets/img/products/pinpoint-ballpen.jpg",
        "quantity":2,
        "date":"02-02-2020",
        "price":100,
        "status":"packed"    
},
    {       
        "name":"Classmate Book",
        "photo":"assets/img/products/classmate-classmate-notebook-cmn018-original-imae6ajy4qhfxd3k.jpeg",
        "quantity":2,
        "date":"02-02-2020",
        "price":100,
        "status":"shipped"
    },
]

how to put the status value in the progress div. please help me to solve this

Upvotes: 0

Views: 4795

Answers (2)

Akhil Aravind
Akhil Aravind

Reputation: 6130

You need to add class dynamically based on the item status. You can test it by changing the status in json file.

<div class="row multi-steps-wrap">
    <ul class="list-unstyled multi-steps">
        <li class="job-status job-created"
            [ngClass]="{'job-inprogress is-active negative': item.status == 'processing'}">processing</li>
        <li class="job-status" [ngClass]="{'job-inprogress is-active negative': item.status == 'packed'}">Packed</li>
        <li class="job-status job-completed "
            [ngClass]="{'job-inprogress is-active negative': item.status == 'shipped'}">Shipped</li>
        <li class="job-status job-closed" [ngClass]="{'job-inprogress is-active negative': item.status == 'delivered'}">
            Delivered</li>
    </ul>
</div>

This is the easiest way to achieve it.

Please check the updated fiddle Stackblitz example

Upvotes: 1

Arunkumar Ramasamy
Arunkumar Ramasamy

Reputation: 781

Here you can use ngClass for add dynamically add class to your div element.

<li class="job-status" [ngClass]="item.status === 'processing' ? 'job-created' : ''">processing</li>

based on that you can use status in div or any html element.

Ref: https://stackblitz.com/edit/angular-ex8uk8

Upvotes: 1

Related Questions