Angular Template Directives: ngClass

ngClass

Multiple CSS classes can be added dynamically to elements within a template using the ngClass directive.

These classes are first defined within the Sass file for the page component and then programmatically assigned through a method within the component class before finally being bound to an element (or elements) within the template using the ngClass directive.

Here’s how this process might look across a page component’s Sass, TypeScript, and HTML files:

The stylesheet