Determine the class for a div within *ngFor by evaluating a condition

Question

Determine the class for a div within *ngFor by evaluating a condition

I am facing an issue where I need to dynamically assign a class to a div element within a *ngFor loop based on a method. Below is the code snippet from my HTML file:

<ng-container *ngFor="let data of totalData let j = index">
          <div>
            <a (click)="selectData(data)">
              <div [ngClass]="{selected : selectedCodeMethod(data)}">
                {{data.code}}
              </div>
            </a>
          </div>
        </ng-container>

Furthermore, here is the TypeScript code I am using:

selectedCodeMethod(data){
   if(this.selectedCode.includes(data.code)){
             return true;
     }
             return false;
}

selectData(data){
    this.selectedCode.push(data.code);
}

The problem I am facing is that even when the selectedCode array is updated by the selectedCodeMethod() function, the changes are not reflected in the ngClass directive. Can someone please suggest what changes I need to make to fix this issue?

angular typescript

Answer 1

Answer №1

It is not recommended to call functions in Angular templates as it can be inefficient and lead to errors - learn more about this in the linked article.

Instead of calling a function directly, you should create an Angular Pipe that suits your requirements. For example, you can create a pipe named "includes" that takes an array and an element and checks if the element is included in the array:

@Pipe({
  name: "includes"
})
export class IncludesPipe implements PipeTransform {
  transform<T>(array: T[], element: T): boolean {
    return array.includes(element);
  }
}

To use this pipe in your component, you need to pass additional arguments:

@Component({
   selector: "app-root",
   template: `
     <ul>
       <li
         *ngFor="let item of items"
         [ngClass]="{ selected: selectedItems | includes: item }"
       >
         Item {{ item }}
       </li>
     </ul>
   `,
  styleUrls: ["./app.component.css"]
 })
 export class AppComponent {
   items = [1, 2, 3, 4, 5];
   selectedItems = [1, 3];
 }

Remember that pipes are pure, so ensure that you make immutable updates when working with them:

selectData(data){
    this.selectedCode = [ ...this.selectedCode, data.code ];
}

If you want to experiment with the code, you can do so in this Code Sandbox

Answer 2

It is not recommended to call functions in Angular templates as it can be inefficient and lead to errors - learn more about this in the linked article.

Instead of calling a function directly, you should create an Angular Pipe that suits your requirements. For example, you can create a pipe named "includes" that takes an array and an element and checks if the element is included in the array:

@Pipe({
  name: "includes"
})
export class IncludesPipe implements PipeTransform {
  transform<T>(array: T[], element: T): boolean {
    return array.includes(element);
  }
}

To use this pipe in your component, you need to pass additional arguments:

@Component({
   selector: "app-root",
   template: `
     <ul>
       <li
         *ngFor="let item of items"
         [ngClass]="{ selected: selectedItems | includes: item }"
       >
         Item {{ item }}
       </li>
     </ul>
   `,
  styleUrls: ["./app.component.css"]
 })
 export class AppComponent {
   items = [1, 2, 3, 4, 5];
   selectedItems = [1, 3];
 }

Remember that pipes are pure, so ensure that you make immutable updates when working with them:

selectData(data){
    this.selectedCode = [ ...this.selectedCode, data.code ];
}

If you want to experiment with the code, you can do so in this Code Sandbox

Determine the class for a div within *ngFor by evaluating a condition

Answer №1

Similar questions

Currently in the process of configuring an ionic project, encountering a series of errors upon executing the npm install command

Utilizing Spring Boot, Message Queues, Node.js, and Angular to build a scalable microservices

Accessing an unregistered member's length property in JavaScript array

Utilizing TypeScript with dc.js for enhanced data visualization capabilities

Initiating the process of loading a texture atlas using PIXI Js and parcel bundler

The type 'string' is not a valid index for the type 'Partial<NewData>'

The array does not yield any values when utilizing Angular CLI

The deployment on Heroku is encountering issues due to TypeScript errors related to the MUI package

What could be causing an error with NextJS's getStaticPaths when running next build?

In Angular 2, the property is kept private and can only be accessed from within the class

Asynchronous problem when using Firebase calls within an Angular ForEach loop

Is there a way to interrupt the routerLink function when a user is prompted in Angular 4+?

The TSX file is encountering difficulty rendering an imported React Component

Unable to run Angular 6 on Windows 10

Discovering the category for ethereum, provider, and contract

What is the best way to access the state value from Redux when the component is opened in a separate browser tab?

The filename is distinct from the file already included solely by the difference in capitalization. Material UI

SecurityClient is encountering a problem where the Http Error status is not being displayed

The synergy between ternary operators and Vue filters

In TypeScript, a numerical value can be returned as a string when