CODEWITHSUNDEEP
angulartypescript
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Setting class and data together in an iteration when using ngFor

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

Upvotes: 2

Views: 83

Answers (1)

huan feng
huan feng

Reputation: 8623

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>

Upvotes: 1

Related Questions