CSS class based on the name

Question

In my .css file I have multiple classes representing my webpage's icon. Based on what I retrieve from my code I want to change the icon.

<ng-container *ngFor="let item of parameterStruct">
   <span class="m-menu__link-wrap">
     <i class="sidebar-icon HERE"></i>
       <span class="m-menu__link-text icon-padding sideBar-text"
          style="padding-left: 15px; font-size: 12px"> 
           {{ item.description |translate }}
        </span>
   </span>
</ng-container>

Where I wrote HERE (in the i element) I want to insert my .css class that is item.description + '-icon' (E.g. 'myClass-icon').

How can I do that?

riorudo · Accepted Answer · 2019-08-26 15:18:37Z

2

You can use the NgClass directive. Something like:

<i class="sidebar-icon" [ngClass]="{'first-icon': item.description === 'first', 'second-icon': item.description === 'second'}"></i>

answered Aug 26, 2019 at 15:18

riorudo

1,25711 silver badges20 bronze badges

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

1 Comment

GigiProve Over a year ago

That is what I was looking for. Thanks

David · Accepted Answer · 2019-08-26 15:11:23Z

0

Try this

<i class="sidebar-icon {{item.description}}-icon"></i>

answered Aug 26, 2019 at 15:11

David

34.6k13 gold badges90 silver badges124 bronze badges

Comments

Naga Sai A · Accepted Answer · 2019-08-26 15:29:25Z

0

To achieve expected result, use below option of using ngClass

<i class="sidebar-icon" [ngClass]="item.description?item.description + '-icon': ''"></i>

answered Aug 26, 2019 at 15:29

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Collectives™ on Stack Overflow

CSS class based on the name

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related