angular - Clase toggle multiple


Pe un element <span> am următorul HTML:

<span (click)="openLeft()"></span>

Metoda unui @Component setează o variabilă boolean:

private isOpen: boolean;
openLeft() {
    this.isOpen = !this.isOpen;
}

În cele din urmă, trebuie să setez o clasă pe un alt element, exact așa cum am putea face în jQuery:

$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');

Așadar, trebuie să adaug/elimin mai multe clase în funcție de variabila boolean.

Cum pot realiza acest lucru?

Răspuns #1

[ngClass]="{'collapse': isOpen, 'hidden-xs': isOpen, 'visible-xs': isOpen}"

sau

[ngClass]="isOpen ? ['collapse', 'hidden-xs', 'visible-xs'] : []"