Angular Template Directives: ngClass

Learn about Angular's built-in ngClass directive and how to use it in Ionic applications.


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

Get hands-on with 1200+ tech skills courses.