angular 5 - add class only if element exists in array

Question

While using ng-for loop, I want to add class to item, only if the id of the item exists in some other objects list.

I tried something like this:

<div *ngFor="let p of products" [class.Flag]="favoriteList.some((item)=> item.Id == p.id)"> </div>

or this:

<div *ngFor="let p of products" [ngClass]="favoriteList.some((item)=> item.Id == p.id) ? 'Flag': ''"> </div>

But it's not compiling.

note that the "favoriteList" may be load to the page after "products".

Any idea how can I do this?

thanks!

Aniket Avhad · Accepted Answer · 2018-08-22 10:56:20Z

3

problem is in your some() method,

Here's is an example

component.html

<div *ngFor="let p of products" [class.Flag]="someMethod(p.id)"> {{p.name}} 
</div>

component.css

.Flag { background: red; }

and component.ts

 products = [
          {"id": 1 , name: 'abc'}, 
          {"id": 2 , name: 'xyz'}
        ];

  favoriteList = [
          {"id": 1 , name: 'test'}, 
          {"id": 3 , name: 'test1'}
        ];

  someMethod(id){
    return this.favoriteList.some((item) => item.id == id);
  }

here is Stackblitz demo.

answered Aug 22, 2018 at 10:56

Aniket Avhad

4,1453 gold badges25 silver badges29 bronze badges

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

Comments

Anshuman Jaiswal · Accepted Answer · 2018-08-22 18:02:53Z

1

use ng-container in order to access template variable in div for class as:

<ng-container *ngFor="let p of products">
    <div [ngClass]="getClass(p.id)">{{p.name}}</div>
</ng-container>

getClass(id) {
    return this.favoriteList.some(item => item.Id == id) ? 'Flag':'';
}

Find stackblitz here

Solution 2:

<ng-container *ngFor="let p of products">
    <div [ngClass]="{'flag': p.favourite == true}">{{p.name}}</div>
</ng-container>

update products with favourite when you receive from api.

edited Aug 22, 2018 at 18:02

answered Aug 22, 2018 at 10:39

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

5 Comments

levi Over a year ago

same question that i asked @Suresh Kumar Ariya

Anshuman Jaiswal Over a year ago

Yes, it will call getClass function whenever products list is being updated.

levi Over a year ago

yes, but my problem is that maybe "products" will load before "favoriteList". and than the function "getClass" will always return false. because "favoriteList" is still empty

Anshuman Jaiswal Over a year ago

so initialize favoriteList in constructor as blank. And whenever you are getting result for favList from api reassign products list from existing. It will work.

Anshuman Jaiswal Over a year ago

You can do it in another way as well, add favourite in product object when you receive data from api.

Suresh Kumar Ariya · Accepted Answer · 2018-08-22 10:45:37Z

0

Might been an issue with the ngClass Syntax. Here is the stackblitz code https://stackblitz.com/edit/angular-3zfrrs

answered Aug 22, 2018 at 10:45

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

levi Over a year ago

thanks! but when the "check()" will call? while the page loading? i asking because my list come from a server during the page load. so if the "check()" function will call before the list will be ready, it's will not work well

Collectives™ on Stack Overflow

angular 5 - add class only if element exists in array

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related