Monday, 11 December 2017

Conditionally add class using Angular - 5 methods

Angular[ngClass][style]conditionally add class

Here I am going to discuss about adding a class conditionally using Angular concept. I have explained about adding a class to an element on click in the previous article. Now let us check 5 different ways to add class dynamically. Similar way you can add styles directly as well.

  1. Directly binding with [style.background-color]
  2. Adding a class [class.active]
  3. Using NgClass [ngClass]
  4. Set multiple classes
  5. Set multiple styles

1. Directly binding with [style.background-color]


Let us check with an example about how to bind styles directly using Angular.


<div [style.border]="isActive ? '1px solid #ccc': 'none'">
  Conditionally add styles...
</div>
<button (click)="isActive = !isActive;">Toggle style</button>

Let us check the same with another example.


<div [style.background-color]="updateStyle()">
  Conditionally add styles...
</div>
<button (click)="toggleStyle = !toggleStyle;">Toggle style</button>


toggleStyle: boolean = false;

updateStyle() {
  if (this.toggleStyle) {
    return "red";
  } else {
    return "";
  }
}

I have used Angular [style] property to add styles here.

2. Adding a class [class.active]


Let us check how to add a class using Angular [class].


<div [class.active]="isActive">
  Conditionally add class...
</div>
<button (click)="isActive = !isActive;">Toggle style</button>

You can set single class using above method.

3. Using NgClass [ngClass]


Let us check by using [ngClass].


<div [ngClass]="{'active': isActive }">
  Conditionally add class...
</div>
<button (click)="isActive = !isActive;">Toggle style</button>

You can use turnery operator for adding either of any classes, check below example for that.


<div [ngClass]="isActive ? 'active':'anotherClass' ">
  Conditionally add class...
</div>
<button (click)="isActive = !isActive;">Toggle style</button>

4. Set multiple classes


Let us check how we can conditionally add set of classes.


<div [ngClass]="setClasses()">Conditionally set classes </div>


toggleStyle: boolean = false;
anotherClass: boolean = false;

setClasses() {
  let classes = {
    activeClass: this.toggleStyle,
    anotherclass: this.anotherClass
  };
  return classes;
}

Similar way you can conditionally add multiple classes, this will be very useful while building your application.

5. Set multiple styles


Similar like classes we can set multiple styles as well. See below example.


<div [ngStyle]="setStyles()">Conditionally set styles</div>


toggleStyle: boolean = false;
anotherClass: boolean = false;

setStyles() {
  let styles = {
    'color': this.toggleStyle ? 'red' : 'blue',
    'font-weight': this.anotherClass ? 'bold' : 'normal'
  };
  return styles;
}

Depending on the condition you can set multiple styles.

We are done. Using above concept we can add or remove classes dynamically on click. Check this link for that example: - Conditionally add or remove class on element click.

In this article we have discussed about conditionally adding a class to an element with different examples.

Angular 2+Angular 4/5[ngClass][style]conditionally add class

Related Info

1. Http calls in Angular with simple examples.

2. Angular client side pagination.

3. Angular show more/less pagination

2 comments :