0

I have variable of number type in typescript file. Now i want to implement post-fix on that variable in angular html file inside loop.

I have tried this: Inside typescript file

templateID:number=0;

And in html file

{{templateID++}} //here it gives me error

How can i do this? Please help.

Improve this question
7
  • String interpolation is for read-only expressions. What do you want to achieve? Commented Apr 6, 2020 at 18:06
  • i want to increment in that variable Commented Apr 6, 2020 at 18:24
  • Yes, I can see that. What I mean is, why. It would be helpful to describe what you're trying to achieve, rather than how you have failed to achieve it. Your approach is incorrect, and I would like to help you find a correct approach. There are a thousand ways to increment a variable - which one is right for you depends on your scenario. Commented Apr 6, 2020 at 18:26
  • ok i have nested loops. Parent loop and inside child loop. i want variable which start with 0 and end with total child length. For example if first parent has 3 children then that variable will be equal to 2 (0,1,2) at the end of child loop iteration. Now when next parent child iteration start then that variable should start from 2 not from 0. Thats what i want. Commented Apr 6, 2020 at 18:33
  • Can you post your code Commented Apr 6, 2020 at 18:34

1 Answer 1

Reset to default
1

You want to display a number related to the current index inside *ngFor. You are currently attempting to increment a component-level property in every iteration of the loop.

There are 2 problems with your current approach:

  1. Interpolation expressions must be read-only
  2. You are attempting to use a component-level property that is different for each item of an array. Every time you increment the property, all HTML bound to that property will show the updated value.

I would approach this in a model-based way. Build a nested array of template ids that matches the structure of your existing nested array.

You haven't given any code [edit - at the time of writing], so I am going to use a nested array of strings, and build a corresponding nested array of `templateIds

component.ts

templates: string[][];
templateIds: number[][];

ngOnInit() {
  this.templates = [
    [ 'a', 'b', 'c' ],
    [ 'd' ],
    [ 'e', 'f' ],
    [ 'g', 'h', 'i' ]
  ];

  this.templateIds = [];

  let templateId = 0;
  this.templates.forEach((x, i) => {
    this.templateIds.push(x.map(x => templateId++));
  });
}

You can then use the index from *ngFor to access the templateIds.

<div *ngFor="let row of templates; index as i">
  <span *ngFor="let col of row; index as j">
    {{col}} {{templateIds[i][j]}}
  </span>
</div>

If it's appropriate, you could alternatively add the templateId to your original nested array, but I think maintaining an external array keeps your code cleaner.

DEMO: https://stackblitz.com/edit/angular-yc6zvh

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I will try this. Thank you :)
x.map is not a function . Now i am facing this issue
Do you understand why you are getting this problem? Can you add your code to your question, and ideally create a stackblitz.
No problem :) This is not the only way of solving the problem, but as long as you understand it and it makes sense, then it's suitable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.