Conditional Attributes, Styles, and Classes in Ionic 2

Conditional Attributes, Styles, and Classes in Ionic 2

Follow Josh Morony on

When using Ionic 2, there are a bunch of CSS Utility Attributes that we can use to style elements in our application. We can also, of course, add normal styles and classes to elements as well.

There will often be times where we want to apply this styling conditionally. Perhaps you want to add the disabled attribute to a button after it has been clicked, or only apply a certain class or style to an element based on some condition being met.

In this video tutorial, we take a look at how to conditionally apply attributes, styles, and classes to elements in Ionic 2.

Here’s the video:

Video Notes

  • Attributes can be applied conditionally using this syntax: <button [outline]="isOutline">

  • Styles can be applied conditionally using this syntax: <button [style.backgroundColor]="myColor">

  • Classes can be applied conditionally using this syntax: <button [class.someClass]="applyClass">

  • ngClass can be used to apply multiple classes to a single element

Check out my latest videos: