Setting class and data together in an iteration when using ngFor

Question

I have a table where each row has been created using ngFor

 <tbody>
    <tr *ngFor="let item of Details">
        <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails">
            <div class="col" [ngClass]="{'d-none':getMilestones(item.ProjectCode)?.length===0}">
                <app-milestone [milestones]="getMilestones(item.ProjectCode)"></app-milestone>
            </div>
            <div class="col" [ngClass]="{'d-none':getRisks(item.ProjectCode)?.length===0}">
                <app-risk [risks]="getRisks(item.ProjectCode)"></app-risk>
            </div>
        </div>
    </tr>
</tbody>

Here as you can see I am setting the class for cols using the same function for passing data to the child component. But my concern is the function fires twice and for the first time its just for toggling the visibility of the DIV.COL

When there are 300+ rows which costs 600 hits for the same function which causing some delay in process.

So please suggest a good approach to optimise this requirement

First of all, Why you should never use function calls in Angular template expressions — Ricky Mo
– Ricky Mo, Commented Oct 25, 2021 at 8:34
"function fires twice" - are you sure it's only firing twice? Binding functions to directives and properties with default change detection strategy would trigger the function for each change detection cycle. In other words, possibly too many times than you think it does. — Barremian
– Barremian, Commented Oct 25, 2021 at 8:38
@MichaelD You are absolutely right.. I verified the hit count and its more than 2. I had no idea.. I am a beginner with Angular — Sandeep Thomas
– Sandeep Thomas, Commented Oct 25, 2021 at 9:21

huan feng · Accepted Answer · 2021-10-25 08:40:24Z

1

Like @ricky said, you should never use function calls in template expressions

Solution: (Choose Milestone things as an sample)

Introduce variables in the component, and use it the template to replace the function bindings:

`hasMileStones` for `getMilestones(item.ProjectCode)?.length===0}`

`projectCodeToMileStonesMap[item.ProjectCode]` for `getMilestones(item.ProjectCode)`

Template:

<div class="col" [ngClass]="{'d-none':!hasMileStones}">
    <app-milestone [milestones]="projectCodeToMileStonesMap[item.ProjectCode]"></app-milestone>
</div>

answered Oct 25, 2021 at 8:40

huan feng

8,7043 gold badges40 silver badges66 bronze badges

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

2 Comments

Sandeep Thomas Over a year ago

Thanks. projectCodeToMileStonesMap is an array variable, isnt it?

huan feng Over a year ago

it could be an Object, depend on how your data structure is. if data structure: {projectCode: mileStoneObj}, it could be an Object

Collectives™ on Stack Overflow

Setting class and data together in an iteration when using ngFor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related