reduce same function call inside ngFor loop

Question

inside the ngFor loop, there are 3 same function call - processStatus(status). Is there a way to call it only once inside the for loop by saving it in a parameter , and then refer to that parameter inside the ngFor?

<ng-container *ngFor="let status of processCompStatusOrder; let i = index;>
     <div *ngIf="!!processStatus(status)">
         <clr-icon class="icon" [attr.shape]="svc.getIcon(processStatus(status))"></clr-icon>
         {{ 'base.' + processStatus(status)?.toLowerCase() | i18next }}
     </div>
</ng-container>

processStatus(status) {
     return this.process?.[status]?.process?.status; 
 }

My attempt below which doesn't work

<ng-container *ngFor="let status of processCompStatusOrder; let i = index; let p=processStatus(status)>
     <div *ngIf="!!p">
         <clr-icon class="icon" [attr.shape]="svc.getIcon(p)"></clr-icon>
         {{ 'base.' + p?.toLowerCase() | i18next }}
     </div>
</ng-container>

Jagadesan · Accepted Answer · 2023-11-02 03:28:05Z

1

you can get the result and alisa like *ngIf='{status:processStatus(status)} as result

now you can access the result.status inside that ngif

`<ng-container *ngIf='{status: processStatus(status)} as result'>
 <div *ngIf="!!result.status">
     // any where else you can access this property
 </div>
</ng-container>`

Also it a better practice to use custom pipes to achieve what the process status function does. using a function inside a template will almost trigger it for every change detection and might lead to performance issues. Angular Pipe

answered Nov 2, 2023 at 3:28

Jagadesan

615 bronze badges

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

1 Comment

user7046311 Over a year ago

for line 1 *ngIf='{s1: value} as result'. What does s1 means? and why need to assign s1 to value

Collectives™ on Stack Overflow

reduce same function call inside ngFor loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related