Two Different Ways To Use NgClass In Angular

code

Colin Stodd

Angular,ngClass

28 Jan 2017 (Published)

28 Jan 2017 (Updated)

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>