CODEWITHSUNDEEP
angulartypescriptlocal-variablesangular-template
James
James

Reputation: 277

How to increment variable directly in template binding in angular 4?

I have the following object:

  this.people = [{
        name: 'Douglas  Pace',
        title: 'Parcelivery Nailed The Efficiency',
        content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
          'movie or hotel. I don\'t need to install different app for different ticket. The payment is also very easy',
        image: '../../assets/img/profile_pics/profile_pic.jpg',
        rate: '4.5',
        classActive: 'testimonials__selected-visible',
        active: true
      },
      {
        name: 'Naseebullah  Ahmadi',
        title: 'Parcelivery Nailed The Efficiency',
        content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
          'movie or hotel. I don\'t need to install different app for different ticket. The payment is also very easy',
        image: '../../assets/img/profile_pics/profile_pic.jpg',
        rate: '4.5',
        classActive: '',
        active: false
      },
      {
        name: 'Haseebullah Ahmadi',
        title: 'Parcelivery Nailed The Efficiency',
        content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
          'movie or hotel. I don\'t need to install different app for different ticket. The payment is also very easy',
        image: '../../assets/img/profile_pics/profile_pic.jpg',
        rate: '4.5',
        classActive: '',
        active: false
      }
    ];

and I am looping this in html like so:

  <ng-template ngFor let-person="$implicit" let-variable [ngForOf]="people">
          {{variable + 30}}
   <ng-template/>

My question is, is there a way of having a local variable and incrementing it by 30 for each element inside the ngfor in template binding? Rather than having methods to do the incrementing?

The issue that I have with incrementing the variable from methods is that i get the following error:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Upvotes: 1

Views: 12296

Answers (1)

Hareesh
Hareesh

Reputation: 6900

<ng-template ngFor let-person="$implicit" let-variable [ngForOf]="people" let-i="index">
  <p *ngIf="i == 0">{{variable + 30}}</p>
  <p *ngIf="i > 0">{{variable + (30*i)}}</p>
<ng-template/>

By this you get the index starting from 0 to total length.

Upvotes: 3

Related Questions