CODEWITHSUNDEEP
cssloopsclassangular6ngfor
Ali
Ali

Reputation: 1759

How to set a CSS class name comes from an array of json object inside ngFor | Angular 6

I have a loop where i display dynamically icons, the position of the icons are styled by css on style.css, but the classes name are actually an elements of json object.

The problem is how to use the value of the json element which is style in order to style the icons.

The *ngFor looks like this:

  <div *ngFor="let count of counters; let i = index"  class="{{count.style}} dispanserDiv ">
      <span class="dispLabel"> {{count.name }}</span>
    <img (click)="openStockModal(stockModal)" class="dispanser" src="../assets/icons/dispanserIcons/0.png">
  </div>

When i insepct to check the value,the desired classes are set whith the value as exactly as i want, but when i hard coded the classes it works fine

also i tried [ngClass] but not working, any help is appreciate.

Upvotes: 0

Views: 596

Answers (1)

Ali
Ali

Reputation: 1759

Well, after i opened the inspect element, and i hover over the tags i found on screen a title message with a direction arrow out of the height of the scree, so i changed the margin-top attr th icon appear again.

but i am pretty sure that when i set the class name without using the json element value, it display fine, but when i use the json element the icons appear at a different position, but i have no idea why this is happening. but it finally worked

Upvotes: 1

Related Questions