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

I'm not sure I understand, but I think you're looking for [Custom pipes](https://angular.io/guide/pipes#custom-pipes) — rmjoia, Apr 19 '19 at 12:13
@rmjoia I have already created custom pipe which returns value. I want to use that custom pipe to add class to element. — Always_a_learner, Apr 19 '19 at 12:14
you mean, the selected value is assigned to a property on the component? — rmjoia, Apr 19 '19 at 12:16
@rmjoia I meant ngClass in html. Please check my code. I am trying to assign ngClass to div using custom pipe result but it does not work. — Always_a_learner, Apr 19 '19 at 12:17
Ah.. you want to assign a css class based on a conditional, the value that is returned from the pipe, is that it? — rmjoia, Apr 19 '19 at 12:18
i think you need a pipe that will filter your array and exclude unwanted classes — Michael Desigaud, Apr 19 '19 at 12:19
Can you please create a simple functional example in [Stackblitz](https://stackblitz.com/)? I will try to help — rmjoia, Apr 19 '19 at 12:19
@MichaelDesigaud apparently the OP is saying that he gets none.. not all — rmjoia, Apr 19 '19 at 12:20
How about the old/classic way : [class.myclass]="someArray[result.id]" ? — Vega, Apr 19 '19 at 12:20
@vega I am trying to assign class if key exist in an array. Thanks — Always_a_learner, Apr 19 '19 at 12:22

score 5 · Accepted Answer · answered Apr 19 '19 at 13:05

5

If I'm not wrong, this is what you're looking for!

Sorry I had to take care of something and only got back now..

Check the StackBlitz

Only applies the class if the value is present.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'inArray' })
export class inArrayPipe implements PipeTransform {

  transform(value: any, exponent: any): boolean {
    let result = value.indexOf(exponent);
    return result > -1;
  }
}

The rest is your code.. but It's all working together in the Stackblitz example above.

answered Apr 19 '19 at 13:05

rmjoia

962
12
21

Thanks a lot rmjoia for taking time out to answer this with usage of pipe. Could you check out fork where I have altered pipe and it stopped working. Thanks. https://stackblitz.com/edit/angular-nevhxm-so-at45c1 – Always_a_learner Apr 19 '19 at 13:16
@Harsimer has to return a boolean or a truthy value.. something is not working, I'll have to debug... please standby – rmjoia Apr 19 '19 at 13:18
1

I found the issue. My pipe is checking value incorrectly. item === value instead of item.value === value – Always_a_learner Apr 19 '19 at 13:19
same, and saved your fork :) glad I could help :) don't forget to mark the answer (you consider the best) as the answer :) – rmjoia Apr 19 '19 at 13:23

score 1 · Answer 2 · answered Apr 19 '19 at 12:25

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 :)

answered Apr 19 '19 at 12:25

Rahul

2,040
2
11
29

Rahul thanks for the answer. I have made a small update in Post. My pipe returns -1 or index value of key in array instead of true or false. – Always_a_learner Apr 19 '19 at 12:46

score 0 · Answer 3 · answered Apr 19 '19 at 12:24

0

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!

answered Apr 19 '19 at 12:24

Andrew Radulescu

1,862
13
21

1

Andrew Radulescu, but isn't it bad practice to use function directly in html to assign a class as it will cause issue with change detection? – Always_a_learner Apr 19 '19 at 12:26
1

No, it is not. This will re-render and re-call the function only when the results array is changed. It's a common usage :). More, the pipe will do exactly the same `for each element will run a function to transform the given values`. – Andrew Radulescu Apr 19 '19 at 12:27
Andrew Radulescu Thanks for clarifying, but sometimes I have expirienced "expression checked after value changed" error while using functions directly in html template. So I was trying to avoid usage of functions directly in html. – Always_a_learner Apr 19 '19 at 12:48
1

This would happen if you update the `results` array in the function that checks that array. Won't happen in your case. – Andrew Radulescu Apr 19 '19 at 12:51

score 0 · Answer 4 · answered May 09 '22 at 13:21

0

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

answered May 09 '22 at 13:21

Eli

1,670
1
20
23

score -1 · Answer 5 · answered Apr 19 '19 at 12:23

-1

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

answered Apr 19 '19 at 12:23

Shifali singla

76
1
2
8

Shifali singla I am trying to avoid calling function in template file. – Always_a_learner Apr 19 '19 at 12:48

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

5 Answers5