Angular Style Binding

Angular Style Binding

In this article, I am going to discuss the Angular Style Binding with examples. Setting inline styles with style binding is very much similar to setting CSS classes with class binding. So, please read class binding in the angular article before proceeding to this article.

Let’s understand style binding with an example. In the below example, we have set the font color of the button element using the style attribute. 

Angular Style Binding

When we run the application it will display the button in red color as expected as shown below.

Angular Style Binding

The following example sets a single style (font-weight). If the property ‘IsBold’ (this boolean property is defined in the AppComponent class) is true, then font-weight style is set to bold else it is set to normal. 

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                  <button style='color:red'
                        [style.font-weight]="IsBold ? 'bold' : 'normal'">My Button
                  </button>
              </div>`
})

export class AppComponent {
    IsBold: boolean = true;
}

The style property name can be written in either dash-case or camelCase. For example, font-weight style can also be written using camel case – fontWeight as shown below.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                  <button style='color:red'
                        [style.fontweight]="IsBold ? 'bold' : 'normal'">My Button
                  </button>
              </div>`
})

export class AppComponent {
    IsBold: boolean = true;
}

Some styles like font-size have a unit extension. To set the font-size in pixels use the following syntax. This example sets font-size to 40 pixels. 

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                  <button style='color:red'
                        [style.font-size.px]="FontSize">My Button
                  </button>
              </div>`
})

export class AppComponent {
    FontSize: number = 40;
}
Multiple Inline Styles

If we want to set multiple inline styles, then we need to use NgStyle directive as shown below

Notice the color style is added using the style attribute

ngStyle is binded to AddCSSStyles() method of the AppComponent class

AddCSSStyles() method returns an object with 2 key/value pairs. The key is a style name, and the value is a value for the respective style property or an expression that returns the style value.

The let is a new type of variable declaration in JavaScript.

let is similar to var in some respects but allows us to avoid some of the common gotchas that we run into when using var. 

The differences between let and var are beyond the scope of this session. For our example, var also works fine.

As TypeScript is a superset of JavaScript, it supports let

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                  <button style='color:red' [ngStyle]="AddCSSStyles()">My Button</button>
              </div>`
})

export class AppComponent {
    IsBold: boolean = true;
    FontSize: number = 40;
    IsItalic: boolean = true;

    AddCSSStyles() {
        let CssStyles = {
            'font-weight': this.IsBold ? 'bold' : 'normal',
            'font-style': this.IsItalic ? 'italic' : 'normal',
            'font-size.px': this.FontSize
        };

        return CssStyles;
    }
}

In the next article, I will discuss the Angular Event Binding with examples.

SUMMARY:

In this article, I try to explain Angular Style Binding with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *