Angular 5 Add Product By Quantity And Show The Total Price With Max Limit

In angular 5 I am creating an application where user can select quantity of products and once they are done the product price with the quantity would be shown in the total price. B

Solution 1:

See you will need three functions to make it work, One to increase quantity, one to decrease and one to count price. This is where you will show your errors as well.

Also you will need one more variable to hold quantity of each item.

So for that I have made your array like this

packagesArray = [
{
  'tickettype': 'general', 'price' : 99, 'limit' : 4,quantity : 0
},
{
  'tickettype': 'vip', 'price' : 299, 'limit' : 2,quantity : 0
},
{
  'tickettype': 'staff', 'price' : 79, 'limit' : 4,quantity : 0
},
{
  'tickettype': 'service', 'price' : 109, 'limit' : 2,quantity : 0
}]

Now the functions will be like

increase_quantity(temp_package){
    if(temp_package.limit == temp_package.quantity){
      returnalert("Can't add more")
    }else{
      temp_package.quantity++
      this.Price += temp_package.price
    }
  }

  decrease_quantity(temp_package){
      if(temp_package.quantity == 0){
        returnalert("can't be in minus")
      }
      temp_package.quantity--
      this.Price -= temp_package.price
  }
  countPrice(){
     this.Price = 0;
      for(let p ofthis.packagesArray){
        this.Price += p.price*p.quantity
      }
  }

And finally the calls would be

<tr *ngFor="let package of packagesArray"><td>{{package.tickettype}}</td><td>{{package.price}}</td><td><divclass="container quantity-spinner-wrap"><divclass="col-md-2"><divclass="input-group number-spinner"><spanclass="input-group-btn"><buttonclass="btn btn-default"data-dir="dwn" (click)="decrease_quantity(package)"><spanclass="glyphicon glyphicon-minus">-</span></button></span><inputtype="text"class="form-control text-center" [(ngModel)]="package.quantity" (change)="countPrice(package)"><spanclass="input-group-btn"><buttonclass="btn btn-default"data-dir="up" (click)="increase_quantity(package)" ><spanclass="glyphicon glyphicon-plus">+</span></button></span></div></div></div></td></tr>

As you can see I have assigned quantity to the variable in object itself, which we are using to check if quantity should be increased or decreased or error should be thrown.

attaching a working Plunker just in case.