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