Friday, April 24, 2020

Angular Style Binding With Examples

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 examples

import { 
    Component
 } from '@angular/core';
import { User } from './user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  userName : String = "Jack";
  textFont : Number = 25;
  textStyle : String ='background-color: #4CAF50; color: white';
  constructor(){

  }
}

In the component there are two properties textFont and textStyle which will be used for setting CSS style properties in the HTML element.

Template

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            User name is <span [style.fontSize.px]="textFont" [style]="textStyle">{{userName}}</span> 
        </div>
    </div>
</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.

Angular Style Binding

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

  1. Angular Event Binding With Examples
  2. Angular Two-Way Data Binding With Examples
  3. Angular ngIf Directive With Examples
  4. Angular Project Structure With File Description

You may also like-

  1. Angular @Component Decorator
  2. Angular Example to Render Multiple Rows
  3. Unmodifiable or Immutable Map in Java
  4. Heap Memory Allocation in Java
  5. Comparing Enum to String in Java
  6. Spring MVC File Download Example
  7. Constructor in Python - __init__() function
  8. Introduction to Hadoop Framework