how to add a class dynamically?

Question

I've been programming in Angular for a short time and I got stuck on the button design. I have already implemented them with an ngIf, appearing and disappearing dynamically depending on whether they were available or not. The thing is that I find it a bit complicated and I wanted to take advantage of the same logic to have them always displayed on screen but add color depending on the same condition that I used before. I have tried to implement the use of ngClass but it is clear that something is wrong because it does not work. here my html:

<div *ngIf="mainFlowchartInstance.eisChartData.value" class="temp_zoom-actions">
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.reset'}" class="center" (click)="zoomReset()"><i class="icon-refresh"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.out'}" class="zoom-out" (click)="zoomOut()"><i class="icon-search-minus"></i></div>
      <div [ngClass]="{'orangeText' : zoomButtons == 'zoomButtons.in'}" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i></div>
</div>

and here my ts:

  public zoomButtons = {
    in: false,
    out: true,
    reset: false
  };


  setZoomButtonsState() {
    this.zoomButtons.out = !!this.currentZoomPosition;
    this.zoomButtons.in = this.zoomButtons.reset = !(this.currentZoomPosition === this.rangeZooms.length - 1);
  }

Someone to make me see my mistake? Thank you in advance.

remove the **'** in the condition: `{'orangeText' : zoomButtons == zoomButtons.reset}`. else Angular expect a string — Eliseo, Feb 10 '20 at 18:50
Does this answer your question? [Set style dynamically in Angular](https://stackoverflow.com/questions/40676203/set-style-dynamically-in-angular) — maury844, Feb 10 '20 at 18:56

Vadi · Accepted Answer · 2020-02-10T19:12:17.213

Try to use it in this way (check if zoomButtons.reset or zoomButtons.out or zoomButtons.in are true or false, then apply class orangeText):

<div [ngClass]="{'orangeText' : zoomButtons.reset}" 
  class="center" (click)="zoomReset()">
  <i class="icon-refresh"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.out}" 
  class="zoom-out" (click)="zoomOut()">
  <i class="icon-search-minus"></i>
</div>
<div [ngClass]="{'orangeText' : zoomButtons.in}" 
  class="zoom-in" (click)="zoomIn()">
  <i class="icon-search-plus"></i>
</div>

Class orangeText will apply if it gets true after :, like in this example from angular doc:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">

and in this place:

[ngClass]="{'orangeText' : zoomButtons.reset}"

zoomButtons.reset without single quotation marks will be treated as a variable, so will return true or false.

thank u , works perfect! – homerThinking Feb 10 '20 at 19:06 — homerThinking, Feb 10 '20 at 19:06

how to add a class dynamically?

1 Answers1