1

I'm building an Angular 5 application to track profit. My application has multiple input fields.

If I sell a Chocolate then I'll press the + button to increase the count.

If I sell Wine then I'll press the + button next to Wine input to increase the count.

Now I have used incrementchoc() function to increase the count of chocolate and incrementwine() function to increase the count of wine.

Here's my HTML below :

 <div >
                <label>Chocolate:</label><br>
            <div class="input-group">
              <span class="input-group-btn">
                  <button type="button" class="btn btn-danger btn-number" (click)= "decrementchoc()" data-type="minus" data-field="quant[2]">
                    <span class="glyphicon glyphicon-minus"></span>
                  </button>
              </span>

              <input type="text" name="quant[2]" [(ngModel)]="info.choco" (keyup)="choc(info.choco)" class="form-control input-number" value="{{info.choco}}" >

              <span class="input-group-btn">
                  <button type="button" class="btn btn-success btn-number"  (click)= "incrementchoc()" data-type="plus" data-field="quant[2]">
                      <span class="glyphicon glyphicon-plus"></span>
                  </button>
              </span>
          </div></div>



<div >
                    <label>Wine:</label><br>
                <div class="input-group">
                  <span class="input-group-btn">
                      <button type="button" class="btn btn-danger btn-number" (click)= "decrementwine()" data-type="minus" data-field="quant[3]">
                        <span class="glyphicon glyphicon-minus"></span>
                      </button>
                  </span>

                  <input type="text" name="quant[3]" [(ngModel)]="info.wine" (keyup)="wine(info.wine)" class="form-control input-number" value="{{info.wine}}" >

                  <span class="input-group-btn">
                      <button type="button" class="btn btn-success btn-number"  (click)= "incrementwine()" data-type="plus" data-field="quant[3]">
                          <span class="glyphicon glyphicon-plus"></span>
                      </button>
                  </span>
              </div></div>

I'm attaching an image as well. This is how my HTML looks like with the - and + buttons

Below is the code for my Component.ts file

 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;
  }

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.

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.

node_man
  • 1,359
  • 4
  • 23
  • 50

2 Answers2

3

You can do the increment and decrement operations in the component template directly. You don't need to use component code for those.

For example:

<button type="button" class="btn btn-danger btn-number"
        (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
    <span class="glyphicon glyphicon-minus"></span>
</button>

Full code:

<div>
    <label>Chocolate:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[2]" class="form-control input-number"
                [(ngModel)]="info.choco" (keyup)="choc(info.choco)" value="{{info.choco}}" >

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.choco = info.choco + 1" data-type="plus" data-field="quant[2]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>

<div>
    <label>Wine:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.wine = info.wine - 1" data-type="minus" data-field="quant[3]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[3]" class="form-control input-number"
                [(ngModel)]="info.wine" (keyup)="wine(info.wine)" value="{{info.wine}}">

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.wine = info.wine + 1" data-type="plus" data-field="quant[3]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>
Mike Hill
  • 3,622
  • 23
  • 27
  • Could a person simply do `info.choco++`? – isherwood Mar 23 '18 at 14:39
  • Increment and decrement operators are not supported in templates and will lead to a template parse error: https://angular.io/guide/template-syntax#template-expressions. The documentation states that assignment operators are not supported, but that may be old or limited to a certain context. I use them regularly without issues. – Mike Hill Mar 23 '18 at 15:04
  • 1
    Ah, just looked a bit further down and found the distinction. Neither increment/decrement operators nor assignments are allowed in _template expressions_, but assignments are permitted in _template statements_ (increment/decrement operators are still not allowed): https://angular.io/guide/template-syntax#template-statements – Mike Hill Mar 23 '18 at 15:05
  • 1
    Thanks a lot @MikeHill Your solution worked for me. This is exactly what i needed. – node_man Mar 23 '18 at 16:01
  • This is such an annoying constraint (I'm trying to find a way to increment a variable across two different ngFors). – Katharine Osborne Mar 28 '19 at 01:01
1

Yes, the current approach makes it heavy. You can do something like:

increment(value: string) {
  if(value === 'wine') {
      this.info.wine = ++this.info.wine;
    }else if (value === 'choc'){
      this.info.choco= ++this.info.choco;
    }else{
      this.info.gir = ++this.info.gir;
    }
}
<button type="button" class="btn btn-success btn-number"  (click)= "incrementwine(wine)" data-type="plus" data-field="quant[3]">
    <span class="glyphicon glyphicon-plus"></span>
 </button>

same for decrement
* I did not check the logic of the code..just refactored.

Arun
  • 3,701
  • 5
  • 32
  • 43
  • I tried your code with a few modifications. Only the logic inside the if(){ } statement gets executed. If i press the + button for wine then it increments the count for wine but when i do the same for choc then also it increments the count for wine. Please check Mike Hill's solution below. It worked for me. Your solution is also useful as I got to learn something new. – node_man Mar 23 '18 at 16:06
  • FYI : I passed the parameters correctly i.e increment(wine) for wine and increment(choc) for chocolate – node_man Mar 23 '18 at 16:13