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:

<ion-slide-page ng-class=”{
htmlBackground: question.questionCategory === ‘HTML’,
cssBackground: question.questionCategory === ‘CSS’,
jsBackground: question.questionCategory === ‘Javascript’}”
ng-repeat=”question in questions”>
</ion-slide-page>

For the style.css, I got my background colors from UI Gradients so I have a background color for each category. Right now, my categories for my questions data are ‘HTML’, ‘CSS’, and ‘Javascript.’ I got all my questions from H5BP’s Front-end-Developer-Interview-Questions Repo.

.htmlBackground {
background: #FF512F;
background: -webkit-linear-gradient(to left, #FF512F , #F09819);
background: linear-gradient(to left, #FF512F , #F09819);
}
.cssBackground {
background: #1A2980;
background: -webkit-linear-gradient(to left, #1A2980 , #26D0CE);
background: linear-gradient(to left, #1A2980 , #26D0CE);
}
.jsBackground {
background: #F09819;
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:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.

Responses
The author has chosen not to show responses on this story. You can still respond by clicking the response bubble.