How to create an input field with the + and - button in Ionic

Question

How to create an input field with the + and - button. By clicking on which user can change the number of selected products, for example, this screen:

Answer 1

Here you can quickly build an example for Ionic 2. If you are using Ionic 1, you should easily adapt it.

You just need to increase and decrease several functions of the controller / class, and then call those who pressed the buttons. This example covers only one button, so something like this is wrapped in ngForor<ion-list>

page.ts:

private currentNumber = 0;
constructor () { }

private increment () {
  this.currentNumber++;
}

private decrement () {
  this.currentNumber--;
}

page.html:

<ion-icon name="remove-circle" (click)="decrement()">
{{currentNumber}}
<ion-icon name="add-circle" (click)="increment()">

Answer 2

v.1 , - :

<div class="flex_row">
  <button class="button icon ion-minus-circled red" ng-click="sub(item)">
  <p> {{item.quantity}} </p>
  <button class="button icon ion-plus-circled green" ng-click="add(item)">
</div>

css

    .red:before {
    color: red;
    }

    .green:before {
    color: green;
    }

    .flex_row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row; 
    flex-direction: row;
    }

$scope.sub = function(i) {
  i.quantity--;
}

$scope.add = function(i) {
  i.quantity++;
}

Answer 3

how about now on ionic3? I tried all the codes, but all the values ​​will be the same