ngClass combine two expression types

Question

Using ngClass I am trying to combine two expression types such that they are data bound and updated with changedetection like this

<div [ngClass]="[test.value | myClassPipe, {'anotherClass': test.isValid}]"></div>

Is the syntax wrong or is this not possible?

Answer 1

As per NgClass guide, A good way to apply NgClass is by binding it to a key:value control object. Each key of the object is a CSS class name; its value is true if the class should be added, false if it should be removed.

Consider a component method such as setClasses that manages the state of three CSS classes:

setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  };
  return classes;
}

Now we can add an NgClass property binding that calls setClasses and sets the element's classes accordingly:

<div [ngClass]="setClasses()">This div is saveable and special</div>

Answer 2

If the isValid property is being set in myClassPipe, try creating a function for ngClass.

-component.html

<div [ngClass]="{'anotherClass': checkIsValid(test)}"></div>

-component.ts

checkIsValid(test: any){  
     let converted = myClassPipe.transform(test); 
     if(converted.isValid) 
         return true; 
     else  
         return false; 
 }