Si bien agregar una sola clase funciona muy bien de esta manera:
[class.loading-state]="loading"
Pero, ¿cómo agrego varias clases Ex si loading es true agregar clase - "loading-state" & "my-class"
¿Cómo lo hago a través del [class] binding
Puede hacer esto simplemente usando ngClass :
Aquí primero, segundo y tercero son el nombre de las clases.
Y en lugar de verdadero/falso, puede poner directamente sus condiciones allí
<div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>En tu caso
<div [ngClass]="{'loading-state': loading, 'my-class': loading }">...</div>O Veriosn más corto (como comentó @matko.kvesic)
<div [ngClass]="{'loading-state my-class': loading}">...</div>Aunque la respuesta de Vivek Doshi es totalmente correcta, a continuación pongo otras alternativas para hacer lo mismo con distintas variables booleanas:
<div [class.first-class]="addFirst" [class.second-class]="addSecond">...</div> export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... } <div [ngClass]="setClasses()">...</div> export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... setClasses() { return { 'first-class': this.addFirst, 'second-class': this.addSecond }; } ... } <div [ngClass]="{'first-class': addFirst, 'second-class': addSecond}">...</div> export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... }