Changing Background Color Based on Item Category in Ionic with ngClass
One of the fun UI elements made popular by apps like Snapchat is swiping left and right and seeing a brand new color background or full-screen image.
I thought it would be fun to do something similar in an Ionic flashcard app I am working on. All it took was adding Angular ngClass on the ion-slide-page tag in my questions.html like this:
htmlBackground: question.questionCategory === ‘HTML’,
cssBackground: question.questionCategory === ‘CSS’,
ng-repeat=”question in questions”>
background: -webkit-linear-gradient(to left, #FF512F , #F09819);
background: linear-gradient(to left, #FF512F , #F09819);
background: -webkit-linear-gradient(to left, #1A2980 , #26D0CE);
background: linear-gradient(to left, #1A2980 , #26D0CE);
background: -webkit-linear-gradient(to left, #F09819 , #EDDE5D);
background: linear-gradient(to left, #F09819 , #EDDE5D);
That’s it. I didn’t have to add anything new in my controller, and this is the easiest fix if you don’t have too many categories yet for your items. Once it get bigger, I will have to figure out a different workaround, but this will do for the categories listed in the Front End Developer Interview Questions list.
Here is what it looks like when you swipe: