Combining class and data within an iteration while utilizing ngFor

I have a dynamic table with rows generated 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>

In this setup, I am applying classes to the columns while passing data to child components. However, the function that handles this is triggering twice, causing a delay in processing due to multiple calls for each row.

This becomes inefficient when dealing with over 300 rows, resulting in unnecessary hits to the same function. I am looking for suggestions on optimizing this process to improve performance.

angulartypescript

Answer №1

Just like @ricky mentioned, it's best to avoid using function calls in template expressions.

Solution: (Select Milestone items as an example)

Create variables within the component and utilize them in the template instead of directly binding functions:

`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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

htmlcssangularionic-frameworkionic4

Looking for a way to toggle the visibility of a dropdown list when clicking on an input in Angular7?

My Angular7 application features a dropdown menu that automatically closes when an item is selected. Additionally, I have implemented functionality to toggle the dropdown open and closed by clicking on an input field. You can view a live example of this be ...

javascriptangulartypescript

Angular 2 testing encounters an issue with ViewUtils when setBaseTestProviders() is used

Encountering an issue when utilizing the 'setBaseTestProviders(..)' method, a console error arises. Our current version of Angular is 2.0.0-rc.1. The test located at (test/areas-list.component.spec.ts) looks like this: import {setBaseTestProv ...

testingangular

Incorporate axios within getStaticProps while utilizing Next.js

I am working on a new project where I am utilizing axios to handle request data. However, I am facing an issue when using axios in the getStaticProps function which results in an error on my index.js page. Here is a snippet of my index.js code: import ...

javascriptreactjstypescriptaxiosnext.js

Leveraging ArangoJS Driver within an Angular2 web platform

Currently, I am in the process of working on a project that involves Angular2 and Typescript (v1.8.10). Our aim is to incorporate data from an ArangoDB database into the web application. Ideally, I would like to utilize the arangojs driver for this task. H ...

typescriptangularsystemjsarangodbarangojs

What leads to the inability to utilize environment variables in this TypeScript app built with Vue 3?

Currently, I am developing a single page application utilizing Vue 3 and TypeScript. The main purpose of this app is to interact with an API. All the necessary information including the API's URL and key are stored in the 'src\env.js' f ...

typescriptvue.jsvuejs3

Issues with routing in AngularJS2 causing navigation problems

My Angularjs 2 routing seems to be malfunctioning, even when I manually enter the URL it still doesn't work. Below are my configuration details and versions: var ngVer = '@2.0.0-rc.5'; // locking in the angular package version var routerV ...

angularangular2-routing

Could you specify the type of useFormik used in formik forms?

For my react formik form, I have created multiple components and now I am looking for the right way to pass down the useFormik object to these components. What should be the correct type for formik? Main Form const formik = useFormik({ ... Subcomponent ...

reactjstypescriptformik

The CoreUI Sidebar gracefully hovers over the main page content

I recently started using CoreUI to design the layout for my application, but I ran into an issue while trying to integrate the Sidebar. Although the Sidebar is visible on the left side, I'm having trouble making sure that the router-view takes up the ...

typescriptvue.jscore-ui

Experiencing difficulty with Angular's connectivity to API via HTTP due to the absence of the CORS header 'Access-Control-Allow-Origin'

My current challenge involves retrieving data from an API using http in Angular. When I trigger the function through ngOnInit, the data is successfully fetched: handleError(error: HttpErrorResponse) { return throwError(() => new Error('Somethin ...

angularhttpcors

The data type 'number' cannot be assigned to the data type 'undefined'. Error code: ts(2322)

I encountered an issue where it's giving me an error stating that type number cannot be assigned to type undefined on the last digit (1) in scale={[1.618, 1, 1]}. Can anyone help me figure out how to resolve this TypeScript error? "use client&quo ...

reactjstypescriptnext.jsthree.jsreact-three-fiber

Creating a Route in Angular 2 for a Component other than the one initialized with the bootstrap function

I am currently in the process of working on a project involving Angular2. If you are interested in understanding why I need to do what I am about to explain, please take a look at this issue. The main component in my project is called AppComponent and it ...

javascriptroutestypescriptangular

Tips for configuring the cookie expiration date using the ngx-cookie-service library

Can anyone offer assistance with setting the expire date for cookies in my Angular 5 app using ngx-cookie-service? Here is what I have tried: setCookies($event){ this.cookieService.set( 'retailAppCookies', "true", 30 ); this.cook ...

angularangular5ngx-cookie-service

An Unexpected ER_BAD_FIELD_ERROR in Loopback 4

I encountered an unusual error: Unhandled error in GET /managers: 500 Error: ER_BAD_FIELD_ERROR: Unknown column 'role_id' in 'field list' at Query.Sequence._packetToError (/Users/xxxx/node_modules/mysql/lib/protocol/se ...

typescriptloopbackv4l2loopbackangular-loopback

What are the steps to implement a Bottom Navigation bar in iOS and a Top Navigation bar in Android using NativeScript Angular?

For my project, I decided to utilize the tns-template-tab-navigation-ng template. I am currently working on creating a WhatsApp clone, and in iOS, it features a bottom navigation bar while in Android, it has a top navigation bar. I am looking for guidance ...

javascriptandroidangulartypescriptnativescript

Tips for testing an Angular 2 component that integrates a third-party JavaScript library

Seeking guidance on how to properly test the component below that utilizes a 3rd party JavaScript library - import * as Leaflet from "leaflet"; export class GeoFencingComponent { map: any; constructor() { this.map = Leaflet ...

angularunit-testingjasmineleaflet

Issue with Angular 2: Unable to locate the module '@angular/animations/browser'

I am currently attempting to install Angular2-Toaster (https://github.com/Stabzs/Angular2-Toaster). Initially, I successfully installed it using npm install angular2-toaster and was able to import it without any errors. However, I realized that I also need ...

angularangular-cliangular-animationsangular2-toaster

The behavior of Angular redirecting after login is quite unusual

I have an Angular component named Login. After a successful login, I want the page to refresh along with the navigation bar and then redirect to another component called 'welcome'. Here is the code snippet: import { TokenStorageService } from ...

angularrouter

Using an additional router-outlet in an Angular 2 application: a step-by-step guide

I have been facing an issue with my angular2 app where I am attempting to use 2 router-outlets. Despite reading numerous blogs and conducting multiple Google searches, I have not been able to make it work. I would greatly appreciate any suggestions on why ...

angularangular-routing

Automate the compilation of Typescript project references by creating a solution that allows for passing unique options to each

When compiling or building a project with references programmatically, I make use of the ts.createSolutionBuilder API. The challenge I face is that in my specific scenario, I do not have individual tsconfig.json files stored on the filesystem for each pac ...

typescriptproject-reference