Array in NgClass with method call and variable

Question

I want to use [ngClass] with a method call that returns an object like {currentWeek: true} and I want to add the var week.state that can have the value rejected.

I want that the HTML looks like this: <div class="currentWeek rejected"></div> but when I use it I get this error:

Error in ./FlexCalendar class FlexCalendar - inline template:29:13 caused by: NgClass can only toggle CSS classes expressed as strings, got [object Object]

How can I combine a method call and a variable into the ngClass? Something like [ngClass]=[setWeekClasses(week), week.state]

setWeekClasses(week: Week): Object {
    let state: string = this.state(week.state);
    return {
        'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(),
        [week.state]: true,
    };
}

Answer 1

You can use a method and a variable to construct the classes-string for the ngClass.

For example see here a class providing a method and a object variable providing class information:

class { 

   getCSSClass() {
     return  { state: "rejected" }
   }

 week:object = {
    state: 'rejected'
  }
}

In Template then you can use a method and a variable to construct the classes-string for the ngClass.

   <div [ngClass]="getCSSClass().state + ' currentWeek'">">
      <h2>Hello {{name}}</h2>
   </div>

or you can write:

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="week.state + ' ' + getCSSClass().state">
      <h2>Hello {{name}}</h2>
    </div>
  `,
})

Check here in plunker: http://plnkr.co/edit/JfN5cjbCjNAUs8qx9oh1

Answer 2

Binding to a method or function is discouraged and returning a new object instance is especially bad.

You should at least cache the result

oldWeek;
oldStyles;
setWeekClasses(week: Week): Object {
    if(this.oldWeek != week) {
      let state: string = this.state(week.state);
      this.oldStyles = {
        'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(),
        [week.state]: true,
      };
      this.oldWeek = week;
    }

    return this.oldStyles;
}

then you can use it like

[ngClass]="setWeekClasses(week)"

This binding

[ngClass]=[week.state, getWeekState(week)]

is invalid because ngClass supports a string, a list of strings and an object with string values while [week.state, getWeekState(week)] results in a list that contains a string and an object, which is not supported.