title: Angular increment or decrement count
body: <p>I'm building an Angular 5 application to track profit.
  My application has multiple input fields.</p>
  
  <p>If I sell a Chocolate then I'll press the + button to increase the count.</p>
  
  <p>If I sell Wine then I'll press the + button next to Wine input to increase the count.</p>
  
  <p>Now I have used incrementchoc() function to increase the count of chocolate
  and incrementwine() function to increase the count of wine.</p>
  
  <p>Here's my HTML below :</p>
  
  <pre><code> &lt;div &gt;
                  &lt;label&gt;Chocolate:&lt;/label&gt;&lt;br&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-btn"&gt;
                    &lt;button type="button" class="btn btn-danger btn-number" (click)= "decrementchoc()" data-type="minus" data-field="quant[2]"&gt;
                      &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/span&gt;
  
                &lt;input type="text" name="quant[2]" [(ngModel)]="info.choco" (keyup)="choc(info.choco)" class="form-control input-number" value="{{info.choco}}" &gt;
  
                &lt;span class="input-group-btn"&gt;
                    &lt;button type="button" class="btn btn-success btn-number"  (click)= "incrementchoc()" data-type="plus" data-field="quant[2]"&gt;
                        &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/span&gt;
            &lt;/div&gt;&lt;/div&gt;
  
  
  
  &lt;div &gt;
                      &lt;label&gt;Wine:&lt;/label&gt;&lt;br&gt;
                  &lt;div class="input-group"&gt;
                    &lt;span class="input-group-btn"&gt;
                        &lt;button type="button" class="btn btn-danger btn-number" (click)= "decrementwine()" data-type="minus" data-field="quant[3]"&gt;
                          &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/span&gt;
  
                    &lt;input type="text" name="quant[3]" [(ngModel)]="info.wine" (keyup)="wine(info.wine)" class="form-control input-number" value="{{info.wine}}" &gt;
  
                    &lt;span class="input-group-btn"&gt;
                        &lt;button type="button" class="btn btn-success btn-number"  (click)= "incrementwine()" data-type="plus" data-field="quant[3]"&gt;
                            &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/span&gt;
                &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm attaching an image as well.
  <a href="https://i.stack.imgur.com/obDid.png" rel="nofollow noreferrer">This is how my HTML looks like with the - and + buttons</a></p>
  
  <p>Below is the code for my Component.ts file</p>
  
  <pre><code> incrementchoc(){
      this.info.choco= ++this.info.choco;
    }
  
    decrementchoc(){
      this.info.choco= --this.info.choco;
    }
  
  
     incrementwine(){
      this.info.wine= ++this.info.wine;
    }
  
    decrementwine(){
      this.info.wine= --this.info.wine;
    }
  </code></pre>
  
  <p>You can clearly see from the above code that if i have n number of input fields then I'll have to write n number of increment and decrement functions. I think this will make the application very heavy.</p>
  
  <p>Please suggest me a better way of doing this by using a single function to increment decrement the values by detecting the ngModel of an input and incrementing/decrementing only that value rather than writing n number of functions.</p>