Skip to main content

ngStyle

ngStyle is a built-in directive in Angular that allows you to set inline styles dynamically on an HTML element based on a given condition or expression. This directive is particularly useful for changing the style of an element in response to component state changes, user interactions, or other dynamic conditions in your application.

How ngStyle Works​

ngStyle expects an expression that evaluates to an object where the keys are style names and the values are the corresponding style values. The directive then applies these styles to the host element. This object is similar in form to the style object you would use in JavaScript.

Basic Usage​

  1. Setting a Single Style: You can dynamically set a single style property.

    <div [ngStyle]="{'color': dynamicColor}">This text's color changes dynamically.</div>

    Here, dynamicColor is a property in your component that holds the color value.

  2. Setting Multiple Styles: You can set multiple styles at once by expanding the object passed to ngStyle.

    <div [ngStyle]="{'color': dynamicColor, 'font-size': dynamicFontSize}">
      This text has dynamic color and font size.
    </div>

    dynamicFontSize is another property in your component that determines the font size.

Advanced Usage​

  1. Using a Function: Define a method in your component that returns the style object.

    <div [ngStyle]="getStyle()">This text's style changes dynamically.</div>

    In your component:

    getStyle() {
      return {
        color: this.isError ? 'red' : 'green',
        fontWeight: this.isBold ? 'bold' : 'normal'
        // other styles
      };
    }

  2. Responsive Styles: Apply styles based on conditions such as screen size or device capabilities.

    <div [ngStyle]="{'font-size': isMobile ? '12px' : '16px'}">Responsive text size.</div>

    Here, isMobile might be a boolean property in your component that determines whether the screen is in mobile view.

Conditional Styling​

  1. Conditional Styling Based on Component State: Change styles according to the state of the component.

    <div [ngStyle]="{'background-color': isActive ? 'blue' : 'gray'}">
      This div changes background based on 'isActive'.
    </div>

    This changes the background color of the div based on the isActive boolean property.

Styling Based on User Interaction​

  1. Dynamic Styling on Events: Change styles in response to events, like mouse hover.

    <div (mouseover)="hover = true" (mouseout)="hover = false"
         [ngStyle]="{'background-color': hover ? 'yellow' : 'white'}">
      Hover over this text.
    </div>

    The background color changes when the mouse hovers over the div.

Use Cases​

  • Highlighting: Dynamically highlight elements based on user actions or component state.
  • Error Display: Change styles to indicate error states, like turning input borders red when a form validation fails.
  • Theme Switching: Change styles to implement theme switching in your application.
  • Animation: Although ngStyle is not meant for complex animations, it can be used for simple style transitions.

Best Practices​

  • Performance Considerations: Be mindful of performance, especially when binding styles to methods or properties that change frequently.
  • Simplicity: Keep the logic in ngStyle as simple as possible. Complex style calculations should be handled in the component class.
  • Prefer CSS Classes for Static Styles: Use ngClass or static class attributes for styles that don't need to change dynamically.