How to store and use angular pipe result to add ngClass in html file

Question

What I am doing:

html file

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": someArray | inArray:result.id}'>
    </div>
    </div>

ts file:

someArray = [1, 2, 3]

results = [
{id:1, name:'abc'},
{id:2, name:'xyz'},
{id:4, name:'pqr'}]

Result: I never get assigned class.

How can I store result of pipe in html file using "as" to use it in ngClass?

inArray (pipe): Pipe returns true or false based on if value exists in array.

Referred Angular 2 add style based on pipe result:

Update 1:

inArray (pipe): Pipe returns -1 or index value based on if value exists in array.

UPDATE 2: stackblitz

Answer 1

You can try something like this - bind the class name to the property binding and use your pipe

[class.myclass]='someArray | inArray:result.id'

Your pipe will return true or false based on the condition the class will be added to the specific html

Hope this helps - happy coding :)

Answer 2

The pipes should be used to transform values.

Try using a simple function to check this:

inArray(value, theArray) {
   return theArray.includes(value);
}

and the template:

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": inArray(result, results)}'>
    </div>
 </div>

or even without the function:

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": results.includes(result)'>
    </div>
 </div>

Good luck!

Answer 3

In my case I used a directive with inputs, when the directive inputs change, the required style can be calculated and applied on the directive input. Taken from answers here: Angular2 Styles in a Directive

Answer 4

You can use function for this : [ngClass]="isValueInArray()" and return value true/false in that function