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){
      return alert("Can't add more")
    }else{
      temp_package.quantity++
      this.Price += temp_package.price
    }
  }

  decrease_quantity(temp_package){
      if(temp_package.quantity == 0){
        return alert("can't be in minus")
      }
      temp_package.quantity--
      this.Price -= temp_package.price
  }
  countPrice(){
     this.Price = 0;
      for(let p of this.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>
    <div class="container quantity-spinner-wrap">
                  <div class="col-md-2">
                    <div class="input-group number-spinner">
                      <span class="input-group-btn">
                        <button class="btn btn-default" data-dir="dwn" (click)="decrease_quantity(package)">
                          <span class="glyphicon glyphicon-minus">-</span>
                        </button>
                      </span>
                      <input type="text" class="form-control text-center" [(ngModel)]="package.quantity" (change)="countPrice(package)">
                      <span class="input-group-btn">
                        <button class="btn btn-default" data-dir="up" (click)="increase_quantity(package)" >
                          <span class="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.