Assign style with * ngIf evaluation in angular2

Question

This is what I have:

home.html

<li *ngFor="let item of myList"> <div *ngIf="item.messageText === {{myVar}}" class="bordered">{{item.messageText}}</div> <div *ngIf="item.messageText !== {{myVar}}" class="greyedOut">{{item.messageText}}</div> </li> 

in home.ts I defined the variable myVar and I assigned it a value.

I want to assign a border class to the myList element, which has a value equal to myVar , and assign a different class if the value of this element is different.

Answer 1

* ngIf will work if you change {{myVar}} to myVar (without interpolation) in the expression.

 <li *ngFor="let item of myList"> <div *ngIf="item.messageText === myVar" class="bordered">{{item.messageText}}</div> <div *ngIf="item.messageText !== myVar" class="greyedOut">{{item.messageText}}</div> </li> 

---

Although I would prefer you to use ngClass here, a cleaner and better solution.

 <li *ngFor="let item of myList"> <div [ngClass]="item.messageText == item.messageText ? 'bordered': 'greyedOut'"> {{item.messageText}} </div> </li> 

OR

 <li *ngFor="let item of myList"> <div [ngClass]="{'bordered': item.messageText == item.messageText, 'greyedOut': item.messageText !== item.messageText }"> {{item.messageText}} </div> </li>