</div>
            <span class="input-group-btn">
              <button type="button" id="decrease" value="DecreaseValue" class="quantity-left-minus btn btn-success btn-number"  data-type="minus" data-field=""  (click)="decreaseValue()">
                <span class="glyphicon glyphicon-minus">-</span>
              </button>
          </span>
          <input type="text" id="number" name="quantity"  class="form-control input-number" value="{{value}}">
          <span class="input-group-btn">
              <button type="button" id="increase" value="Increase Value" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field=""  (click)="increaseValue()">
                  <span class="glyphicon glyphicon-plus">+</span>
              </button>
          </span> </li>
          <li class="list-group-item d-flex justify-content-between">
            <h6 class="my-0">Total cost in Euros  </h6>
            <p>{{price | currency : "€"  }}</p>
          </li>

constructor(private http: HttpClient,
    private route: ActivatedRoute,
    private ps: ProductShopService
    ) { this.value = this.ps.value,
      this.price = this.ps.price}

constructor(private http: HttpClient,
    private route: ActivatedRoute,
    private ps: ProductShopService
    ) { this.value = this.ps.value,
      this.price = this.ps.price}

export class ProductShopService {
  // shopping cart start
  value: number  = 1;
  price: number  = 20;
 paypalLoad: boolean;


 increaseValue(){
   this.value= ++this.value;
   this.price= 20*this.value;
 }

 decreaseValue(){
   if(this.value < 2 ){
     this.value = 1
     }else{
       this.value = --this.value;
       }

   //this.value= --this.value;
   this.price= 20*this.value;
 }
  constructor() { }
}