Conditional Attributes, Styles, and Classes in Ionic 2

Conditional Attributes, Styles, and Classes in Ionic 2

Follow Josh Morony on

Learn Ionic with Josh ☕

Hey, I hope you enjoy the article.

If you want a weekly update with my newest content, access to the blog's bonus content, or you want to sign up for one of my free beginner or advanced email courses just enter your details here or in the form below.

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

If you enjoyed this article, feel free to share it with your friends ☝

Check out my latest videos: