Interpolate variable into class with Angular

Question

I would like to dynamically generate a class name for my element. For example, <span class=``icon icon-${route.title}``></span> (had to use double backticks here, but it should really be just one set of backticks.)

    <ul class="sidebar-list">
      <li *ngFor="let route of menuRoutes.items">
        <span class=`icon icon-${route.title}`></span>
        <a routerLink="/{{route.path}}" routerLinkActive="active">{{ 'menu.' + route.title | translate}}</a> 
      </li>
    </ul>

Muhammad Abdullah Shafiq · Accepted Answer · 2019-03-12 10:49:19Z

7

Try this:

<span class="icon icon-{{route.title}}"></span>

answered Mar 12, 2019 at 10:49

Muhammad Abdullah Shafiq

8646 silver badges17 bronze badges

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

Comments

Yash Rami · Accepted Answer · 2019-03-12 11:16:18Z

2

You can also archive this by using a [ngClass] directive

<span [ngClass]="['icon', route.title]"></span>

answered Mar 12, 2019 at 11:16

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

Interpolate variable into class with Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related