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

Creating a function in Typescript to extend a generic builder type with new methods

Looking to address the warnings associated with buildChainableHTML. Check out this TS Playground Link Is there a way to both: a) Address the language server's concerns without resorting to workarounds (such as !,as, ?)? b) Dodge using type HTMLChain ...

typescripttypescript-generics

Exploring steps to secure routes without authentication using the amplify authenticator component in Angular

As indicated by the title, the documentation for the amplify authenticator component suggests wrapping it around the app-component. However, I have a need for routes that are not authenticated, and I don't want to prompt users to log in unless they vi ...

angularauthenticationamazon-cognitoaws-amplify

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. Image 2: This ...

htmlcssangular

ERROR: PipeError - Conversion of "Invalid Date" to a date is not possible for the DatePipe

While attempting to format a date with time, I ran into an error. The way I am sending the request is as follows: created = this.datePipe.transform(dateCreated, 'yyyy-MM-ddTHH:mm'); I require the time in order to consume a service that necessi ...

angulardatepipetransform

Why isn't my Promise fulfilling its purpose?

Having trouble with promises, I believe I grasp the concept but it's not functioning as expected in my project. Here is a snippet of my code : (I am working with TypeScript using Angular 2 and Ionic 2) ngOnInit() { Promise.resolve(this.loadStatut ...

angulartypescriptionic2

Tips for invoking a service from another in angular version 6

The following code snippet showcases Service 1, specifically the uploadAttachment method which executes an http post call. This method is invoked from Service 2. However, in Service 2, the instance of Service 1 is consistently undefined, resulting in a fai ...

angulardependency-injectionangular-services

type Y does not contain property X

When I encounter this error message: The property 'module' is missing in the type 'Menu'. The property 'parentId' is not found in the type 'Menu'. the code snippet triggering it appears like this: private menus: ...

angulartypescript

Expanding unfamiliar categories

Currently, I am working with Gutenberg blocks in a headless manner. Each Gutenberg block is defined by the following structure: type Block = { name: string; className?: string; key?: string | number; clientId: string; innerBlocks: Block ...

reactjstypescriptreact-typescript

Anticipating outcome in NgRx Effects

Incorporating ngrx-effects into my project has been successful for retrieving data: component dispatches action -> effect triggers http service call -> data is returned from http service -> effect sends data to store through action -> component ...

angularngrxngrx-effects

Executing the Ionic code within the Xcode Swift environment

I have developed an Ionic application that I successfully compiled in Xcode for iOS. Additionally, I have integrated a widget into the application. My goal is to set it up so that when the application is opened using the regular app icon, it displays the m ...

swifttypescriptionic-framework

Components in Angular 2 rc6 are failing to load

Since upgrading my APP to rc6, I've been experiencing some issues with component loading/rendering. In my APP, I categorize components into routing_components and util_components. Interestingly, the routing_components are working perfectly fine while ...

angularangular2-components

Setting the current date in Angular using TypeScript and storing it in a MySQL database

As I delve into learning Angular, I am focused on practicing with a form. Specifically, I am attempting to include the current date when inputting client records along with their RFC, branch, and cost. Unfortunately, my attempts have been unsuccessful in i ...

mysqlangulartypescript

How can one effectively monitor the advancement of a file transfer operation?

Looking at integrating a Spring Boot REST API with an Angular Frontend, I am interested in monitoring file upload/download progress. I recently came across an informative article that dives into the implementation details of this feature. The approach see ...

angularspring-boothttpwebsocket

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...

javascriptangulartypescriptngrxngrx-store

Jasmine: A guide to mocking rxjs webSocket

Here is my chat service implementation: import {webSocket, WebSocketSubject} from 'rxjs/webSocket'; import {delayWhen, retryWhen, take} from 'rxjs/operators; import {timer} from 'rxjs; ... export class ChatConnectionService { priva ...

angulartypescriptwebsocketrxjsjasmine

Utilizing TypeScript with dc.js for enhanced data visualization capabilities

I've encountered an issue with types while working with dc.js version 4.2.7. To address this, I went ahead and installed what I believe to be the standard types module for dc.js using the following command: Command I used for Installation npm i @type ...

typescripttypescript-typingsdc.js

Guide to generating a text string by utilizing the foreach loop

Is there a way to combine text strings from interfaces into a single file for display in UI? The current code is generating separate files for each interface. How can I achieve the expected result of having all interfaces in one file? Additionally, is it ...

javascriptjqueryangulartypescript

Using Angular 4: Redirecting Menu to Component with Electron

I am currently working on my first project using Angular 4 and Electron to develop a desktop application. One of the challenges I'm facing is figuring out how to redirect to a specific component when a submenu item is clicked after overriding the ele ...

javascriptangularelectron

What is the process for changing the border color of a material selection?

Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: to this: Any suggestions on how to achieve this? Appreciate any assistance you can provide! ...

cssangularangular-materialmaterial-design

Encountered an optimization error during the docker build process with Ng build

Encountering an error while trying to build an Angular app in docker, specifically when running npm run build: #11 1.106 > ng build #11 1.106 #11 4.769 - Generating browser application bundles (phase: setup)... #11 32.23 ✔ Browser application bundle g ...

node.jsangulardockernpm