Is there a way to directly increment a variable in an Angular 4 template binding?

Presented here is an object that I am working with:

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

When rendering this in html using a loop, it looks something like this:

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

My query pertains to whether there exists a way to create a local variable and increment it by 30 for each element within the ngfor in template binding, without relying on separate methods for the incrementing process?

The reason behind my inquiry into avoiding incremental methods is due to encountering the following error message:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Answer №1

<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/>

Through this method, you can access the index which starts from 0 and goes all the way up to the total length of items in the loop.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Limit the typescript generic type to only a singular string literal value, preventing the use of unions

Within my project, I have introduced a generic entity type that utilizes a generic to determine a field type based on a specific set of string literals: type EntityTypes = 'foo' | 'bar' | 'baz'; type EntityMappings = { foo: ...

Creating a constant.ts file to define universal constantsWould you like assistance with anything else

Is there a way to create a constant.ts file or use a command to declare all global constants and export them for easy access? ...

Angular 2 rc4's HTTP requests are generating uncaught exceptions (in promise)

Is there a change in Angular 2 HTTP service after upgrading to Angular 2 rc4? I have spent the entire day going through Angular HTTP client documentation and searching on Stack Overflow, but I can't seem to find the solution to my problem. Here are ...

EventEmitter asynchronous callback

Can you attach an asynchronous callback to an EventEmitter in TypeScript or JavaScript? someEmitter.on("anEvent", async () => console.log("hello")); If so, does using an async function guarantee that the function will run asynchronously? Also, what ar ...

GraphQL Query Fails to Save Result - Constantly Returns undefined

After running a query and logging the result, I encountered an issue where the result is always "undefined" when trying to work with it further (as shown in the second logging). It seems like I might be overlooking something obvious here. Any help would ...

Exploring the benefits of using TypeScript with Angular2 for HTTP

I have a locally stored "region.json" file containing the following data: { "regionId":1, "region":"CAN" }, { "regionId":2, "region":"CEN" } Additionally, I have an "enviroment-app.component.ts" file structured as follows : import {Component, ...

Angular 8's array verification feature lacks the ability to recognize preexisting elements

I've been trying to add and delete items in an array when a user selects or deselects the same item. However, it appears that either my array is not working properly or there is a bug in my code causing it to fail. <div class="grp-input"> ...

Difficulties with managing button events in a Vue project

Just getting started with Vue and I'm trying to set up a simple callback function for button clicks. The callback is working, but the name of the button that was clicked keeps showing as "undefined." Here's my HTML code: <button class="w ...

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

"Enhancing global accessibility through i18n strategies and evolving language usage

I am looking to update the terminology used in my Angular application. Essentially, I need i18n functionality, but I am not interested in changing the language or implementing localization. The app will remain in English, and I simply want to modify certa ...

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Currently, I am using a tutorial on implementing translations in Angular2. The implementation works well, but I would like to optimize it by loading json files only when the associated language button is clicked. Can someone assist me with this? // app/tr ...

order by truthiness

I am working with an array of the following class: export class Tests { id: number; name: string; createdAt: any; succress: boolean; constructor(id: number, name: string, createdAt: any, success: boolean) { this.id = id; this.name = nam ...

Encountering an issue during the installation of Angular CLI

I am encountering an error while attempting to install angular/cli on my 64-bit Windows 10 machine. The specific error I am receiving is as follows: npm ERR! code ENOGIT npm ERR! Error while executing: npm ERR! undefined ls-remote -h -t ssh://<a href=" ...

What is the best way to combine index signatures with established properties?

Imagine a scenario where an interface has certain defined properties with specific types, but can also include additional properties with unknown keys and various other types. Here is an example: interface Bar { size: number; [key: string]: boolean | s ...

Sort the observable data by a value returned from an API request

I am completely new to using RxJS and any assistance offered would be greatly appreciated! Within my component's HTML template, I am looking to create a radio button list. The values for this list are fetched from an observable using the async pipe. ...

Expanding the global object in ES6 modules to include TypeScript support for extensions like `Autodesk.Viewing.Extension`

I created a custom forge extension and now I am looking to incorporate typescript support as outlined in this blog post. However, I am facing an issue where typescript cannot locate the objects like Autodesk.Viewing.Extension and Autodesk.Viewing.ToolInter ...

Create an array with individual key-type pairs for each generic element, then iterate through the array

Consider the enum and type declarations in the code below: enum MyEnum { FIRST, SECOND }; type MyType = { firstKey: string | null, secondKey: boolean, thirdKey: MyEnum } Next, a variable is declared using the type as follows: let glob ...

The Angular 2 http request seems to be failing to reach the web api's get method when using a string parameter overload

Issue at hand is that the initial Get method gets triggered by this particular HTTP request: http://localhost:56690/api/testelements/?name=aeg One would anticipate the second (string overload) method to be invoked due to the presence of a string parameter ...

Best practices for making API calls with axios in React

When accessing a backend API to retrieve a product in my frontend React application using async/await axios, I have defined a function like this: export const getProduct = ():Promise<Product> => { const {data} = await axios.get<Product>(&a ...

Material-UI chart displays only loading lines upon hovering

Currently, I am utilizing a Material UI Line chart in my NextJS 14 application to showcase some data. Although the data is being displayed properly, I have encountered an issue where the lines on the chart only render when hovered over, rather than appeari ...