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

Question

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>

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

Do you mean the value of the json element is a classname or a style like {'width': '100%,', height':'500px'}"? — Igor Carvalho
– Igor Carvalho, Commented Oct 25, 2018 at 19:44
@Igor Carvalho no, but does this attribute take a class name or a css code? — Ali
– Ali, Commented Oct 25, 2018 at 19:49
[ngStyle] can take a css code. use [ngClass] for a class name. — Igor Carvalho
– Igor Carvalho, Commented Oct 25, 2018 at 19:52

Ali · Accepted Answer · 2018-10-25 20:07:47Z

1

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

answered Oct 25, 2018 at 20:07

Ali

1,7699 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related