Create local variable in Angular template

Question

I'm using Angular 6.

I would like to assign a local variable in for loop to avoid multiple call of the method.

<li *ngFor="let item of items">
    <!-- Declare someItem variable here -->
    <!-- let someItem = getSomeItemFromDifferentDataStructureUsingSomeLogic(item) -->
    {{ someItem.name }}
    {{ someItem.anotherValue }}
</li>

I don't also want to make a separate component to display someItem cause it is too trivial to create separate one.

What would be your's approach?

Many thanks for a help.

Your best approach would be to handle this in your component before displaying it in the html template. — Jon
– Jon, Commented Sep 27, 2018 at 20:23

Antoniossss · Accepted Answer · 2018-09-27 20:27:19Z

1

I would map items to someItems in compontent code and interate over it

In compontent:

someItems=items.map(this.getSomeItemFromDifferentDataStructureUsingSomeLogic.bind(this));

and in template

<li *ngFor="let someItem of someItems">
    {{ someItem.name }}
    {{ someItem.anotherValue }}
</li>

In case if you need in this *for loop original item, just create an array of item-someItem pairs and iterate over that, using what is needed respectively.

answered Sep 27, 2018 at 20:27

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

1 Comment

Athlan Over a year ago

As I thought. I need to prepare whole data to display in component code.

Collectives™ on Stack Overflow

Create local variable in Angular template

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related