Within our app component we wish to add a onValid CSS class whenever the _valid property on the component is true.

Approach

Within styles.css create the onValid CSS class.

.onValid {
    color: aqua;
}

Decorate a isValid() getter with @HostBinding that will add the onValid CSS class to the component whenever the _valid property is true.

@HostBinding('class.onValid')
get isValid() { 
    return this._valid;
}
private _valid = true;

Binding Angular CSS Classes Dynamically with @HostBinding | Task