Customized Increment Arrows on Input doesn't work! How to collect the input value through buttons?

Question

At the beginning of my application, using the input arrows or the keyboard, my data were sent without any problem. Wanting to make the UI more friendly I decided to hide the browser arrows and implement some buttons to add and subtract in the same input. I have in my html the following two elements. One is an input to determine the unit to add to a cart and the other element is a button that should send that info to another component

<div class='child'>
  <div class='fourth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' class='def-number'>
        <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus">-</a>
        <input type='number' placeholder='0' [(ngModel)]='item.quantity' (change)='this.updateCart(item)' min='0'>
        <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class='plus'>+</a>
      </li>
    </ul>
  </div>
</div>
<div class='child d-flex align-items-center justify-content-center'>
  <div class='fifth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' style='line-height: 82px'>
        <button class='cart' (click)='addItem()'><i class='icon-addcart'></i></button>
      </li>
    </ul>
  </div>
</div>

and this is my function

  updateCart(item, idProduct) {
    console.log(item);
    this.cart.updateItem(item);
    this.eCart.next(this.cart.getCart());
  }

If I modify the amount of input with the keyboard I get the data without any problem to my 'updateCart()' function. the problem comes with 'plus' and 'minus' buttons and the class button 'cart', since I don't know how to make it collect the data in the same way

Someone who can give me an idea of what I should do? Thank you in advance

Answer 1

public updateQuantity(update: number): void {
  this.item.quantity += update;
}

public updateCart(item): void {
    console.log(item);
    this.cart.updateItem(item);
    this.eCart.next(this.cart.getCart());
}

<div class='child'>
  <div class='fourth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' class='def-number'>
        <a (click)='updateQuantity(-1)' class="minus">-</a>
        <input type='number' placeholder='0' [(ngModel)]='item.quantity' (ngModelChange)='updateCart(item)' min='0'>
        <a (click)='updateQuantity(1)' class='plus'>+</a>
      </li>
    </ul>
  </div>
</div>
<div class='child d-flex align-items-center justify-content-center'>
  <div class='fifth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' style='line-height: 82px'>
        <button class='cart' (click)='addItem()'><i class='icon-addcart'></i></button>
      </li>
    </ul>
  </div>
</div>

Can you try (ngModelChange)="updateCart($event)" instead of (change)='updateCart(item)'?