9

So I am basically trying to set a highlight if an object is selected already. How can I compare the objects to change classes? Something like this 

<[ngClass]="{{perkResult.perk === perk.perk}} ? 'highlight' : 'none-hightlight' ">

Current code:

<div class="col-xs-12">
  <div class="col-xs-12 benefit-selection">
     <ul class="benefits-dropdown-ul" *ngIf="perkList"> .     
      <a class="benefits-dropdown-div" *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
       //highlight here
        <li class="benefits-dropdown-li">{{ perkResult.perk }}</li>
      </a>
     </ul>
  </div>
 </div>

 <div class="col-xs-6 benefit-selected" *ngFor="let perk of company.perks; trackBy: customTrackBy; let i = inde
    {{ perk.perk }}
 </div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
Kenzo
  • 367
  • 2
  • 5
  • 21

2 Answers2

17

You do not need the interpolation brackets {{}}. In this case, [ngClass] is looking for an expression, so

[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"

or

[ngClass]="[perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight']"

will work.

LLai
  • 13,128
  • 3
  • 41
  • 45
  • Great that works. But I have 2 for loops and perk.perk will not register in the location I want to place it. How can I reference it? – Kenzo Jan 03 '18 at 14:24
  • 1
    @Kenzo so `perk` and `perkResult` are in different scopes. I would suggest storing `perk.perk` in another variable. (say when something is selected). Then you can compare `perkResult.perk === newVar` – LLai Jan 03 '18 at 14:28
-2

You want the whole expression inside {{}} to evaluate to the class string you want

[ngClass]="{{perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'}}"
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • This solution will produce a compile error, because you can't use both [] square bracket operator and {{}} interpolation operator. A valid solution is here: https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass/35269213#35269213 – Alberto Oct 02 '18 at 18:00