Menu
So I am pretty new to this. I using Ionic 3 and trying to dynamically choose which class to use based on a condition but I cannot get ngClass to work... Any help would be appreciated.
<div ng-class="test: data[i].complete ? 'completed' : 'notCompleted'>
<div class="dueDate">{{ data[i].dueDate }}</div>
<div class="taskLabel">{{ data[i].taskLabel }}</div>
<div class="checkBox">
<img src="{{ data[i].complete_url }}" style="width : 100% ; height : 100%" (click)="CheckBox(i)">
</div>
</div>
708
yes , you can do it.
We define two CSS classes which we use to apply for alternate list items – using ngClass directive. Alternatively the list items appear in bold and in normal font weight. Here we use ternary operator and whenever i % 2 is zero we apply bold class to that item, if not we apply normal class to that list item.
To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.
You are using angularjs syntax wih angular, it should be something like this,
[ngClass]="test===data[i].complete?'completed':'my-notCompleted'"
[class.x]="condition" adds x class to the element if condition is true
<div [class.completed]="data[i].complete" [class.myNotCompleted]="!data[i].complete">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
