Angular ngStyle Directive

https://www.tektutorialshub.com/angular/angular-ngstyle-directive/

Angular ngStyle Directive - TekTutorialsHub

The Angular ngStyle directive allows us to set the many inline style of a HTML element using an expression. The expression can be evaluated at run time allowing us to dynamically change the style of our HTML element. In this tutorial, we learn how to use the ngStyle with an example.

 

ngStyle Syntax

1 2 3

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

Where

element is the DOM element to which style is being applied

styleNames are style names ( ex: ‘font-size’, ‘color’ etc). with an optional suffix (ex: ‘top.px’, ‘font-style.em’),

 

styleExp is the expression, which is evaluated and assigned to the styleNames

 

We can add more than one key value pairs 'styleNames': styleExp each separated by comma.

In the following example, some-element gets the style of font-size of 20px.

1 2 3

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

The units (for example px, em) are prefixed to the styleName.

1 2 3 4 5 6 7

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

ngStyle Example

Change Style Dynamically

Initialize a variable color and add it to your component

1 2 3

color: string= 'red';

And in your template, add the following

1 2 3 4

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

In the above example, we apply ngStyle directive to the div element. We assign JavaScript object {'color': color} to the ngStyledirective. The variable color is dynamically changed by the user input and it is applied instantly to the div element

The following code uses the ternary operator to set the background color to red if the status variables indicator is set to “error” else blue.

1 2 3

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

ngStyle multiple attributes

We can change multiple style as shown in the following example

1 2 3 4 5 6 7 8

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

The JavaScript object is assigned to the ngStyledirective containing multiple properties. Each property name of the object acts as a class name. The value of the property is the value of the style.

BEST ANGULAR BOOKS
The Top 8 Best Angular Books, which helps you to get started with Angular  

Specifying CSS Units in ngStyle

CSS has several units for expressing a length, size etc. The units can be em, ex, %, px, cm, mm, in, pt, PC etc. We prefix the units to the StyleName as shown below.

1 2 3 4

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

Using object from Controller

Create a class as shown below

1 2 3 4 5 6 7

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

And in controller initialize the class

1 2 3

styleClass: StyleClass = new StyleClass();

Then you can refer it in your template as shown below

1 2 3

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

Change Style using Style Property Binding

We can also change the Styles using the Style Binding. .

Further Reading on Angular Styles

• Angular ngStyle Directive
• ngClass Directive
• Angular Global Styles
• Angular Component Styles
• View Encapsulation in Angular
• Angular Directives

You can download the source code from GitHub