Avoid multiple function calls in Angular template

Question

I have the following code

<div *ngFor="let item of items">
    <button [disabled]="doSomething(item)"></button>
    <input [someProperty]="doSomething(item)"></div>
    <div [ngClass]="{
          'class1': item.attr == 'val1' || doSomething(item),
          'class2': row.attr != 'val2' && !doSomething(item)
        }"
></div>

in component

doSomething(item) {
    return someBooleanLogic(item);
}

I feel it is not a good practice to recalculate every time the doSomething value for each item in the template.

Is there a more recommended way to do this?

Poul Kruijt · Accepted Answer · 2020-06-24 12:33:04Z

1

There are a couple ways around it, one of them being a template "hack":

<div *ngFor="let item of items">
  <ng-container *ngIf="{ something: doSomething(item) } as data">
    <button [disabled]="data.something"></button>
    <input [someProperty]="data.something"></div>
    <div [ngClass]="{
          'class1': item.attr == 'val1' || data.something,
          'class2': row.attr != 'val2' && !data.something
        }"></div>
  </ng-container>
</div>

Another way could be by adding a property to each item object when it is obtained, and read this property.

answered Jun 24, 2020 at 12:33

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Comments

BlackWolf · Accepted Answer · 2020-06-24 12:33:34Z

0

If you have a huge amount of items, you can save time by calculating your BooleanLogic before in your Typescript code, save it in a list and loop through it.

answered Jun 24, 2020 at 12:33

BlackWolf

11 bronze badge

1 Comment

yeya Over a year ago

Consider adding an example

Collectives™ on Stack Overflow

Avoid multiple function calls in Angular template

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related