Angular NgStyle is a built-in directive that lets you set a given DOM element’s style properties. The key is a style name, and the value is an expression to be evaluated. The resulting non-null value, expressed in the given unit, is assigned to the given style property.
![]()
We will look at different methods to dynamically assign a CSS style to an element using the style property. Some CSS style properties like font-size, margin, padding, width, height, and plenty others need a unit of measurement. The values for these properties are not complete without a unit or the style will not take effect. The Angular ngstyle conditionally applies a set of styles for the containing HTML element. The angular directive is classified into three groups, component, structure, and attribute directive. Both structure and attribute directives have a lot of built-in directives. The structure directive has the following built-in directive *ngIf, *ngFor , *ngSwitch and is used to transform the DOM structure.
But, first, let’s install a new angular project or you can use Stackblitz online code editor, especially for angular.
If you do not have the latest Angular CLI, you need to update Angular CLI. (if working on local machine or vscode)
Next, install the Bootstrap 4 CSS Framework using the following command. You can skip the step of installing bootstrap because we do not need too much styling here.
npm install bootstrap --save
Now, add the bootstrap CSS file inside the angular.json file.
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
When assigning many different styles to an item, the syntax becomes confusing and cluttered. This is why there is a different way of assigning styles in Angular using the ngStyle directive.
Besides the style property, ngStyle takes an object containing the style names and their values.
In app.component.html,
<input type="text" [ngStyle]="{'color':'red', 'font-weight':'800'}" [(ngModel)]="value">
<label [ngStyle]="{'color':'blue', 'font-weight':'800'}">{{value}}</label>
<input type="text" [ngStyle]="{'color':'green', 'font-weight':'800'}" value="{{value}}">
We can also use conditional statements inside of ngStyle to display colors based on the given conditions.
Firstly, the square brackets denote a property binding and contain the property that we want to set and update dynamically.
However, binding to the style property looks slightly different from other property bindings. This is because the style property is an object itself, with the CSS properties as its properties. Therefore, we also need to specify the actual CSS property to style.
You may find it surprising that we can use the dash-case for the CSS property since the JavaScript representation is camelCased. Angular lets us use either, but it is better to use the dash-case since it is consistent with the style attribute, as well as, it is what we’re used to in CSS declarations and also because Angular provides it to us.
Summary
So, there we have it. Use property binding to style one CSS property of an element and use the ngStyle directive to set multiple CSS properties. ngStyle is applied as an attribute to an element. The square brackets around the directive indicate that the NgStyle directive has an input property also called ngStyle. It is a common pattern to define the directive and bind to its input property at the same time. This is how we can pass our style information to the ngStyle directive. Both tools make it super easy to dynamically style elements. In this article, we discovered how we could use the ngStyle directive to assign styles dynamically using Angular.
That’s it for this article.
Thank you !