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">ngClasscan be used to apply multiple classes to a single element