Using ngStyle for Dynamic Styling in Angular

Introduction

Angular allows developers to build dynamic and interactive web applications. One of the key features of Angular is its ability to handle dynamic styling using directives like ngStyle. In this blog, we will explore how to use ngStyle to dynamically apply styles to elements in your Angular application.

What is ngStyle?

ngStyle is an Angular directive that allows you to dynamically set CSS styles for HTML elements based on the values of variables or expressions in your component. This is incredibly useful when you want to change the appearance of an element based on user interactions, data changes, or other dynamic factors.

Before we dive into using ngStyle, make sure you have an Angular project set up. You can create a new Angular project using the Angular CLI with the following command:

ng new dynamic-styling-app

Once your project is set up, navigate to the project directory and create a new component using the Angular CLI:

ng generate component dynamic-styling

Now, let’s start using ngStyle in our component.

Using ngStyle in Angular

Step 1: Import the FormsModule

To use ngStyle, you need to import the FormsModule in your app.module.ts file. Open the src/app/app.module.ts file and add the following import statement:

import { FormsModule } from '@angular/forms';

Then, add FormsModule to the imports array in the @NgModule decorator:

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    FormsModule, // Add FormsModule here
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 2: Create a Component Property for Styles

In your dynamic-styling.component.ts file, define a property that will hold the styles you want to apply. For example, let’s create a property called dynamicStyles:

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

@Component({
  selector: 'app-dynamic-styling',
  templateUrl: './dynamic-styling.component.html',
  styleUrls: ['./dynamic-styling.component.css'],
})
export class DynamicStylingComponent {
  dynamicStyles: any = {
    color: 'blue',
    fontSize: '16px',
  };
}

Step 3: Use ngStyle Directive in the Template

Now, open the dynamic-styling.component.html file and apply the ngStyle directive to the HTML element you want to style dynamically. For example, let’s apply it to a <div> element:

<div [ngStyle]="dynamicStyles">
  This text will have dynamic styles.
</div>

In this example, the ngStyle directive is bound to the dynamicStyles property defined in our component class. The styles in dynamicStyles will be applied to the <div> element.

Step 4: Updating Styles Dynamically

You can update the dynamicStyles property in your component to change the styles dynamically. For instance, you can create a button that changes the text color when clicked:

<button (click)="changeTextColor()">Change Text Color</button>

In your component class, define the changeTextColor() method:

changeTextColor() {
  this.dynamicStyles.color = 'red';
}

When you click the “Change Text Color” button, the text color of the <div> element will change from blue to red due to the updated dynamicStyles property.

Conclusion

In this blog, we’ve explored how to use the ngStyle directive in Angular to apply dynamic styles to HTML elements. This is a powerful feature that allows you to create interactive and visually appealing web applications that respond to user interactions and changing data.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency