how to increment variable value in angular template

Question

I'm new to angular and want to increment value while printing as done in JAVA as follows:

<% int count=1; %>
<%=count++%> This is line with Text
<%=count++%> This is another line with different text
<%=count++%> This is line with different text
<%=count++%> This is last line

You shouldn't do things like this in template side of a component. — Elias Soares
– Elias Soares, Commented Jun 15, 2022 at 12:29
During the component's life cycle, everything within the template is going to be evaluated on every change detection. So my guess is, you actually don't want to increase count this way. What is your actual objective? — mbojko
– mbojko, Commented Jun 15, 2022 at 12:36

0xBobby · Accepted Answer · 2022-06-15 14:24:39Z

Maybe this could be done only in html with some weird ngIf hacks, but that's not probably the way to go.

Instead you can declare an array in *.component.ts with your texts like this

lines = [
        'This is line with Text',
        'This is another line with different text',
        'This is line with different text',
        'This is last line',
    ];

and in *.component.html do an *ngFor

    <div *ngFor="let line of lines; let index = index">{{ index + 1 }}: {{line}}</div>

It will output:

<div>1: This is line with Text</div>
<div>2: This is another line with different text</div>
<div>3: This is line with different text</div>
<div>4: This is last line</div>

Collectives™ on Stack Overflow

how to increment variable value in angular template

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related