Using ngStyle for Dynamic Styling in Angular

Introduction

Angular permits builders to build dynamic and interactive net programs. One of the key capabilities of Angular is its potential to deal with dynamic styling the use of directives like ngStyle. In this blog, we are able to discover the way to use ngStyle to dynamically apply patterns to elements in your Angular software.

What is ngStyle?

NgStyle is an Angular directive that lets in you to dynamically set CSS styles for HTML elements based totally at the values of variables or expressions on your issue. This is fairly beneficial while you want to exchange the arrival of an element based totally on consumer interactions, facts changes, or other dynamic factors.

Before we dive into the usage of ngStyle, ensure you’ve got an Angular mission set up. You can create a new Angular undertaking 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 have explored a way to use the ngStyle directive in Angular to apply dynamic styles to HTML elements. This is a effective function that lets in you to create interactive and visually attractive net applications that reply to consumer interactions and changing statistics.

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