List with add and remove buttons

Ionic Framework ionic-v3
1

I have a list, which is populated from my provider:

img

Each element of the list contains 2 buttons (increment and decrement the input value)

My HTML:

    <ion-list>
      <ion-item *ngFor="let element of services" #item>
        {{element.name}}
        <ion-icon name="add"  on-click="add(inp)"></ion-icon>
        <input text-center style="text-align:center;" #inp class="text-center" id="{{element.id}}" type="number" value="0"  min="0">
        <ion-icon name="remove" on-click="remove(inp)"></ion-icon>
      </ion-item>
    </ion-list>

My ts:

  remove(item) {
    var tmp = document.getElementById(item.id).getAttribute("value");
    var num = parseInt(tmp);
    console.log(num);
    if (num > 0) {
      document.getElementById(item.id).setAttribute("value", (num - 1) + "");
    }

  }

  add(item) {
    let tmp = document.getElementById(item.id).getAttribute("value");
    let num = parseInt(tmp);
    console.log(num);
    if (num >= 0) {
      document.getElementById(item.id).setAttribute("value", (num + 1) + "");
    }
  }

But It’s not working propperly, this way generates “lag” in the interface, sometimes I have to press a button several times to change the input.

Also, if I go back to the main menu, then I go back to this page, I press a button but the value of the input is not modified.

Maybe is a better way to do it with ViewChildren (and how)?