dynamic css class on a span element - angular 4

Question

I have a span element in table. I want to change the css class dynamically based on the value.

Here's my html code:

    <table>
          <thead>
               <tr>
                  <th>Fruits</th>
                  <th>Colors</th>
               </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of fruits>
             <td>{{data.fruits}}</td>
             <td>
             <span class="badge badge-default badge-success">{{data.color}}</span>
             </td>
           </tr>
          </tbody>
</table>

I want to show the badge color based on data I get. For example if I get red, I want to change the badge class to badge-danger. If I get green, I want to change the class to badge-success and so on.

How do I achieve that in angular 4?

Thanks

Our_Benefactors · Accepted Answer · 2018-07-30 18:00:05Z

4

<span class="badge badge-default" [ngClass]="{'badge-danger': data.color === 'red', 'badge-success': data.color === 'green' }></span>

You can use the ngClass directive in angular. The arguments are 'class-name':condition , if condition is true, then class-name is added to the element.

read more about ngClass here: https://angular.io/api/common/NgClass

answered Jul 30, 2018 at 18:00

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

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

Comments

Chellappan வ · Accepted Answer · 2018-07-30 18:00:59Z

1

Try this way

<span class="badge badge-default" [ngClass]="{
    'badge-success':data.color === 'green',
    'badge-warning':data.color === 'yellow',
    'badge-success-danger':data.color === 'red'
  }">
  </span>

answered Jul 30, 2018 at 18:00

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Comments

Alex Mtz · Accepted Answer · 2020-02-10 21:05:19Z

1

1) what if the value comes from an enum value in the object 2) is there a way to put all the ngClass logic in a component method and do soemthing like:

<tbody>
    <tr *ngFor="let task of tasks">
        <td>{{ task.title }}</td>
        <td>{{ task.description }}</td>
        <td>
            <span class="label" [ngClass]="{ getTaskLabel(task) }" >task.taskstate</span>
        </td>
        <td>
    </tr>
</tbody>

answered Feb 10, 2020 at 21:05

Alex Mtz

111 bronze badge

Comments

Vaibhav · Accepted Answer · 2018-07-30 18:06:55Z

-1

<span class="badge badge-default badge-success" [ngStyle]="data.color =='red' ? {'class': 'badge badge-danger'} : {'class': 'badge badge-success'}"></span>

You can use ngStyle property and ternary operator with the same something like what i have provided

edited Jul 30, 2018 at 18:06

answered Jul 30, 2018 at 17:56

Vaibhav

1,50713 silver badges17 bronze badges

4 Comments

Our_Benefactors Over a year ago

He asked how to change the class, not the style

Our_Benefactors Over a year ago

What the heck, now it's not even valid syntax

Vaibhav Over a year ago

stackoverflow.com/questions/13813254/…

Our_Benefactors Over a year ago

That is for angularJS, not angular 2+. Maybe this still compiles in angular2+ but it is not standard syntax. I would not pass it in a code review. ngStyle is for modifying properties directly. ngClass is for modifying classes. Don't cross the streams.

Collectives™ on Stack Overflow

dynamic css class on a span element - angular 4

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related