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

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.