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.
Table of Contents
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.
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
