In modern web development, dynamic styling of elements is a crucial aspect of creating interactive and visually appealing web applications. Angular provides robust mechanisms for binding CSS classes and styles to HTML elements through class and style binding. This article delves into the intricacies of class and style binding, exploring how to implement them, their syntax, and practical examples.

Class and Style Binding in Angular

Class and style binding in Angular allows developers to add and remove CSS class names and set styles dynamically. This capability enhances the flexibility and responsiveness of web applications.

Binding to a Single CSS Class

To create a single class binding, use the following syntax:

[class.sale]="onSale"

Angular adds the class sale when the bound expression onSale is truthy and removes it when onSale is falsy. This behavior excludes undefined values, which is particularly useful when multiple bindings to the same class exist across different directives on an element.

Binding to Multiple CSS Classes

To bind multiple classes, use the following syntax:

[class]="classExpression"

The classExpression can be:

  • A space-delimited string of class names.
  • An object with class names as keys and truthy or falsy expressions as values.
  • An array of class names.

With the object format, Angular adds a class only if its associated value is truthy.

For instance, consider the following example where multiple classes are applied based on certain conditions:

<div [class]="{ 'active': isActive, 'highlight': isHighlighted }"></div>

In this example, the active class is applied if isActive is true, and the highlight class is applied if isHighlighted is true.

Binding to a Single Style

To create a single style binding, use the prefix style followed by a dot and the name of the CSS style. For example:

[style.width]="width"

Angular sets the property to the value of the bound expression, which is usually a string. Optionally, a unit extension like em or % can be added, requiring a number type.

For example:

<div [style.width.px]="100"></div>

This sets the width of the div element to 100 pixels.

Binding to Multiple Styles

To bind multiple styles, use the [style] attribute:

[style]="styleExpression"

The styleExpression can be:

  • A string list of styles.
  • An object with style names as keys and style values as values.

Note that binding an array to [style] is not supported.

Here is an example of binding multiple styles using an object:

<div [style]="{ 'font-size': fontSize, 'color': fontColor }"></div>

In this case, the div element will have its font-size and color dynamically set based on the values of fontSize and fontColor.

Single and Multiple-Style Binding Example

Consider the following example of a navigation bar component in Angular:

import {Component} from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-nav-bar',
  template: `
    <nav [style]="navStyle">
      <a [style.text-decoration]="activeLinkStyle">Home Page</a>
      <a [style.text-decoration]="linkStyle">Login</a>
    </nav>
  `,
})
export class NavBarComponent {
  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
  linkStyle = 'underline';
  activeLinkStyle = 'overline';
}

In this example, the navStyle variable applies multiple styles to the nav element, while linkStyle and activeLinkStyle apply different text decorations to the anchor elements.

Styling Precedence

A single HTML element can have its CSS class list and style values bound to multiple sources (e.g., host bindings from multiple directives). Angular uses styling precedence to determine which binding to use when there are multiple bindings to the same attribute.

Conclusion

Class and attribute binding in Angular provides a powerful way to dynamically apply CSS classes and styles to HTML elements. By understanding the syntax and examples provided in this guide, developers can enhance the styling capabilities of their Angular applications, leading to more dynamic and interactive user experiences. For more information you can check the documentation.

At T&S Software, we support developers in creating dynamic and interactive applications with the latest Angular techniques.

Recent Articles