ngStyle In Angular

The Code Points May 28, 2022 0

In this article, we will learn how to use the ngStyle with an example. The Angular ngStyle directive allows us to use an expression to set the various inline styles of an HTML element. We can modify the style of our HTML element dynamically by evaluating the expression at runtime.

Syntax of ngStyle

<element [ngStyle]="{'styleNames': styleExp}">...</element>

Where

The DOM element to which the style is applied is called the element.

styleNames are the names of the styles (for example, 'font-size,' 'color,' and so on). with a suffix (for example, 'top.px' or 'font-style.em'),

The expression that is evaluated and applied to the styleNames is called styleExp.

We can add multiple 'styleNames': styleExp key-value pairs, each separated by a comma.

Some-element is given the font-size of 20px in the following example.

<some-element [ngStyle]="{'font-size': '20px'}">Set Font size to 20px</some-element>

The styleName is prefixed by the units (for example, px, em).

Syntax:

<element [ngStyle]="{'styleName.unit': widthExp}">...</element>

Example:

<some-element[ngStyle]="{'font-size.em': '3'}">...</some-element>

Example of ngStyle

Change Style Dynamically

Create a color variable and add it to your component.

color: string= 'red';

Also, include the following in your template:

<input [(ngModel)]="color" /> 
<div [ngStyle]="{'color': color}">Change my color</div>

The ngStyle directive is applied to the div element in the preceding example. The ngStyledirective is given the JavaScript object 'color': color. The user input changes the variable colour dynamically, and it is applied to the div element instantly.

The ternary operator is used in the following code to change the backdrop color to red if the status variables indicator is set to "error," else to blue.

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

Multiple attributes for ngStyle

As seen in the following example, we can modify various styles.

<p [ngStyle]="{'color': 'purple',
               'font-size': '20px',
               'font-weight': 'bold'}">
     Multiple styles
</p>

The ngStyledirective, which has numerous properties, is given the JavaScript object. Each object's property name serves as a class name. The property's value is equal to the style's value.

Using ngStyle to specify CSS Units

CSS offers a number of units for expressing length, size, and other attributes. Em, ex, percent, px, cm, mm, in, pt, PC, and more quantities are possible. The units are prefixed to the StyleName as indicated below.

<input [(ngModel)]="size" /> 
<div [ngStyle]="{'font-size.px': size}">Change my size</div>

Using a Controller object

Make a class like the one below.

class StyleClass {
   'color': string= 'blue';
   'font-size.px': number= 20;
   'font-weight': string= 'bold'; 
}

Also, in the component, set up the class.

styleClass: StyleClass = new StyleClass();

Then, as seen below, you may reference it in your template.

<div [ngStyle]="styleClass">size & Color</div>

Conclusion

In this article, we learned how to use the ngStyle for example. In the next article, we will learn how to customize your angular apps in a variety of ways.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.