Two Different Ways To Use NgClass In Angular

Two Different Ways To Use NgClass In Angular

code
Colin Stodd
Angular,ngClass
27 Jan 2017

ngClass functions as though ngIf is built into the statement. The class binds and defaults to truthy. So if showPerson is true, it will bind, or else it will not. But you can declare the else with a falsey statement by using ! not.

Component:

// componentName.component.ts
showPerson:boolean = false;
showToggle(){
    this.showPerson = !this.showPerson;
}

View:

Better for having more than one conditional:

<!-- * componentName.component.html * -->
<button class="btn" (click)="showToggle();"
        [ngClass]="{'btn-warning':showPerson, 'btn-success':!showPerson}">
    Toggle person
</button>

Using dot notation:

<!-- * componentName.component.html * -->
<button class="btn" (click)="showToggle();"
        [class.btn-success]="!showPerson"
        [class.btn-danger]="showPerson">Toggle person
</button>