title: Angular : How can I increment and decrement a value in loop?
body: <p>I want to increment and decrement a value in loop Angular.</p>
  
  <hr>
  
  <p>For Example : <strong>Quotes</strong></p>
  
  <p>I want to show the Quotes and show <strong>Quotation number</strong> like this :</p>
  
  <p><strong>1</strong>. &lt;- That's what I want</p>
  
  <p><strong>2</strong>. &lt;- That's what I want</p>
  
  <p>So this is <strong>quotes.component.ts</strong> for send request to server :</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Response } from '@angular/http';
  import {Quote} from "../quote.interface";
  import {QuoteService} from "../quote.service";
  
  @Component({
      selector: 'app-quotes',
      templateUrl: './quotes.component.html',
      styleUrls: ['./quotes.component.css']
  })
  export class QuotesComponent implements OnInit {
      quotes:Quote[];
      loading = false;
  
      constructor(private quoteService:QuoteService) {
      }
  
      ngOnInit() {
      }
  
  
      onGetQuotes() {
          this.loading = true;
          this.quoteService.getQuotes()
              .subscribe(
                  (quotes:Quote[]) =&gt; this.quotes = quotes,
                  (error:Response) =&gt;console.log(error),
                  (loading:Response) =&gt; this.loading = false
              );
  
      }
  
  
  }
  </code></pre>
  
  <p>And my <strong>quote.component.html</strong> for show the loop :</p>
  
  <pre><code>&lt;div class="card mt-3" id=""&gt;
    &lt;div class="card-header"&gt;
      {{ num ++ }}  |  {{ quote.content }}
    &lt;/div&gt;
  
    &lt;div class="card-footer"&gt;
      &lt;div *ngIf="editing"&gt;
        &lt;input type="text" [(ngModel)]="editValue"&gt;
        &lt;a href="#" (click)="onUpdate()"&gt;Save&lt;/a&gt;
        &lt;a href="#" (click)="onCancel()"&gt;Cancel&lt;/a&gt;
      &lt;/div&gt;
      &lt;div *ngIf="!editing"&gt;
        &lt;a href="#" (click)="onEdit()"&gt;Edit&lt;/a&gt;
        &lt;a href="#" (click)="onDelete()"&gt;Delete&lt;/a&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you see i wrote <code>{{ num ++ }}</code> </p>
  
  <p>like <code>PHP code</code>
      But its gave me error !</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors:</p>
    
    <p>Parser Error: Unexpected end of expression</p>
  </blockquote>
  
  <p>How can i figure it out ?</p>