Angular 2 provide different ways to apply class to the elements based on certain conditions. In this post I would like to show you couple of ways to conditionally applying class to a DOM element in Angular 2 with ngClass.
Methods to Apply CSS Classes Conditionally
|
1 2 3 4 5 6 7 8 9 10 11 |
#1 <div [ngClass.has-errors]="form.errors.email"></div> #2 <div [ngClass]="{'has-errors': form.errors.email}"></div> #3 <div [ngClass]="{1:'class-step-1',2:'class-step-2',3:'class-step-3',5:'class-step-5'}[step]"></div> #4 <div [ngClass]="form.errors.email ? 'has-errors' : 'has-success'"></div> |
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
