CODEWITHSUNDEEP
htmlcssangular
GigiProve
GigiProve

Reputation: 337

CSS class based on the name

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?

Upvotes: 0

Views: 54

Answers (3)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of using ngClass 

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

Upvotes: 0

riorudo
riorudo

Reputation: 1227

You can use the NgClass directive. Something like:

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

Upvotes: 2

David
David

Reputation: 34435

Try this

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

Upvotes: 0

Related Questions