In this post we’ll discuss another one-way binding known as Angular style binding. Using style binding you can set styles dynamically by getting the value of style property conditionally or through a component's property.
Angular style binding syntax
Syntax of style binding is similar to property binding, square brackets are used for style binding too. To create a style binding, start with the prefix style followed by a dot (.) and the name of the CSS style property.
[style.style-property] = "style-value"
Here style-property which is the binding target will be set to the value of the bound expression, "style-value" in this case.
For example following statement sets the text color of the button based on the value it receives from the buttonColor variable of the component.
<button [style.color]="buttonColor">Submit</button>
Adding unit extension
You can add a unit extension like em, px or % along with CSS style property or with style-value. For example in the following statement font size for the button is set in px unit.
<button class="btn btn-primary" [style.fontSize.px]="fontSize">Submit</button>
Syntax for multiple styles
You can also add multiple style properties. The expression attached to the [style] binding can be passed as a string list of styles like "width: 100px; height: 100px;".
For example- <button [style]="buttonStyle">Submit</button>Where buttonStyle is a String variable defined in the component as-
buttonStyle : String ='background-color: #4CAF50; font-size:15px; border: none; color: white';
Angular style binding example
In the component there are two properties textFont and textStyle which will be used for setting CSS style properties in the HTML element.
import { Component } from '@angular/core';
@Component({
selector: 'app-stylebinding',
templateUrl: './stylebinding.component.html',
})
export class StylebindingComponent {
userName: string = "Jack";
textFont: number = 25;
textStyle: string ='background-color: #4CAF50; color: white';
}
Template
<div>
User name is <span [style.fontSize.px]="textFont" [style]="textStyle">{{userName}}</span>
</div>
In the template span element is styled using the style binding. Using [style.fontSize.px] single property is set which also has a unit extension. Using [style]="textStyle" multiple properties are set. Note that font size can also be include with in the multiple properties, done separately here just to demonstrate how to set both single as well as multiple style properties.
Style binding or ngStyle directive
The NgStyle directive can be used as an alternative to direct [style] bindings but as per Angular documentation style binding is preferred.
“However, using the above style binding syntax without NgStyle is preferred because due to improvements in style binding in Angular, NgStyle no longer provides significant value, and might eventually be removed in the future.”Reference- https://angular.io/guide/template-syntax#style-binding
That's all for this topic Angular Style Binding With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-