dynamic css class on a span element - angular 4

Related searches

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

<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

Angular 2+ Classes with NgClass and NgStyle ― Scotch.io, Luckily with Angular, we have multiple ways to create dynamic stylings to div>. To change the style of the above div and class in pure javascript, app.​component.html', //pass in the css of the component styleUrls: ['. The third is the actual div in which we have attached a style binding to, While the fourth  NgClass: How to assign CSS classes in Angular. In this tutorial, we are going to take a look how we can use CSS classes with angular. We will take a look at different methods to dynamically assign a CSS class to an element using the className directive.

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>

NgStyle & NgClass • Angular, We will take a look at different methods to dynamically assign a CSS class to an element using the className directive. This is an affiliate link. Styling is a lot of fun. We mostly define CSS classes to make styles reusable and consistent. However, we need to style an element inline sometimes. Additionally, we need to dynamically change inline styles based on the application state. In this article, we will look at how to style elements inline using the style attribute.

<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

NgClass: How to assign CSS classes in Angular, Styling is a lot of fun. We mostly define CSS classes to make styles reusable and consistent. However, we need to style an element inline In this Angular 8|9 NgClass tutorial, we will learn to apply CSS classes to the HTML element using NgClass directive. If you are just getting started with Angular, then we would suggest you check out our Angular tutorials. NgClass is built-in directive provided by Angular, and it helps in adding or removing CSS classes on an HTML element.

Using ngStyle in Angular for dynamic styling, Array - the CSS classes declared as Array elements are added,; Object - keys are CSS classes that get added when the expression given in the value evaluates to​  Angular comes to the rescue with a special syntax, <property>.<unit>. So for the above if we wanted the size to be 24 pixels we would write [ngStyle]=" {'font-size.px':24}" The property name is font-size.px and not just font-size. The .px suffix says that we are setting the font-size in pixels. You could .em to express the font size in ems or

NgClass, string - the CSS classes listed in the string (space delimited) are added, Array - the CSS classes declared as Array elements are added, Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference HTML Character Sets Google Maps Reference CSS CSS Reference CSS Browser Support CSS Selector Reference Bootstrap 3 Reference Bootstrap 4 Reference W3.CSS Reference Icon Reference Sass Reference

Comments
  • He asked how to change the class, not the style
  • What the heck, now it's not even valid syntax
  • stackoverflow.com/questions/13813254/…
  • 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.