Binding Angular CSS Classes Dynamically with @HostBinding


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


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.

get isValid() {
return this._valid;
private _valid = true;




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation