How to Use ngStyle in Angular for Dynamic Styling?

A user-friendly and dynamic interface is paramount to engaging users on your site. Angular is one of the most powerful and famous JavaScript frameworks that offers a wide range of features to build an attractive interface.

"ngStyle" is a versatile directive that helps you dynamically style your elements based on changing data and user interactions.

Here, we will help you learn ngStyle effectively. So, get ready to embark on a journey towards captivating users!
 

The Style attribute helps control how a view element looks and allows you to set styles directly.

Syntax:

<p style="background-color: red;">
</p>

In the example above, it changes the background color of a <p> tag to red.

You can have multiple style declarations in a block.

<p style "background-color: green; margin: 2px; font-size: 10px;"> 
</p>

The text inside the style attribute contains the CSS style declaration, where you specify properties (like color or size) and their values (like red or 14px).

Style declaration:

1    selector {
2    css-property: value;
3    css-property: value;
4    }

 

Example of the style attribute:

<p style="background-color: yellow; color:black; font-size: 35px;">
</p>

 

The inline style for the p element styles from the selector.

 

Property binding is used for styling CSS properties. We can style only one property at a time.

Syntax:

<element [style.css-property.unit] = "template-expression"> </element>

 

Example of the property binding with the style:

<p [style.color] "Blue"> 
</p>

 

Here, the square brackets serve as a dynamic property binding, holding the property to be updated.

Additionally, style binding includes the unit of measurement. Certain CSS properties require a specific unit, such as font size, padding, margin, width, height, and more.

In the app.component.html file, you can write the style property like this:

<p [style.font-size.px] = "isValid? 30: 15"> </p>
<p [style.font-size.%]= "isValid: 50: 30"> </p>

 

In the app.component.ts file, we can set the isValid value to true:

import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    title = 'NgStyleDemo';
    isValid = true;
    }

 

The NgStyle attribute helps you transform the look and feel of an element, adding extra charm to your web design. NgStyle is truly helpful when the value is dynamic.

With the ngStyle directive, you can easily create styles and captivate your audience.

<div [ngStyle] = "{ "background-color" : 'red' }"> </div>

 

In the example above with NgStyle, it sets the div's background to red.

You can add multiple CSS properties at once with NgStyle.

<div [ngStyle] = "{ "background-color': 'red', 'color': 'white', 'font-size': '40px' }"> </div>

 

Here we have set various CSS properties like background color, color, and font size to div element.

Example 1
In this example, we will use ngStyle for styling and write the inline CSS on the element.

<h1 [ngStyle] "{ 'background-color': 'green', 'color': 'black', 'font-w eight': 'bold', 'font-size: 20px' }"> 
</h1>

 

Example 2

app.components.ts

import { Component } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    title = 'NgStyleDemo';
      
    myCss = {
    'background-color' : 'green',
    'color' : 'white', 
    'font-size' : '40px',
    'font-weight' : 'bold',
    };
    }

 

app.component.html

<p [ngStyle]="myCss"> 
</p>

In this example, we can write the CSS in the app.component.ts file and use the CSS variable in the ngstyle directive in the app.component.html file.

 

Leveraging ngStyle in your web development projects will help you create attractive interfaces and captivating user experiences.

With ngStyle, you can now breathe life into your applications, adapting them to user interactions and injecting personality into your code. The possibilities are endless, so go ahead, experiment, push boundaries, and create interfaces that not only function flawlessly but also leave a lasting impression on users.

 

---

You might also like:

• Read Also: How to Upload Image to Storage Folder in Laravel 10
• Read Also: How To Open Datepicker Popup In Angular 15 Material
• Read Also: How To Image Upload With Progress Bar Angular 15
• Read Also: Boosting Angular 15 Performance: Tips & Trick