Angular Style Binding

Back to: Angular Tutorials For Beginners and Professionals

Angular Style Binding with Examples

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 our Angular Class Binding article before proceeding to this article. At the end of this article, you will understand what exactly Angular Style Binding is and when and how to use style binding in Angular Application.

What is Angular Style Binding?

The Angular Style Binging is basically used to set the style in HTML elements. You can use both inline as well as Style Binding to set the style in the element in Angular Applications. Here, in this article, I will show how to use both inline as well as style binding to style the HTML Elements with examples.

Understanding Style Binding in Angular:

Let’s understand how to use style binding as well as Inline style to style the HTML Elements. In the following example, we use inline style set the font color of the button element i.e. using the style attribute of the HTML Element. 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button style='color:red'>Click Me</button>
              </div>`

})
export class AppComponent {
}

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

In the below example, it will set the style (font-weight). If the property ‘IsBold’ (this boolean property is defined in the AppComponent class) is true, then the font-weight style is set to bold else it is set to normal. 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button style='color:red' [style.font-weight]="IsBold ? 'bold' : 'normal'">Click Me
                </button>
              </div>`

})
export class AppComponent {
  IsBold: boolean = true;
}

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button style='color:red' [style.fontWeight]="IsBold ? 'bold' : 'normal'">Click Me
                </button>
              </div>`

})
export class AppComponent {
  IsBold: boolean = true;
}

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button style='color:red' [style.font-size.px]="FontSize">Click Me
                </button>
              </div>`

})
export class AppComponent {
  FontSize: number = 40;
}

Multiple Inline Styles in Angular Application:

If you want to set multiple inline styles in the angular application, then you need to use NgStyle directive as shown in the below example.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>
                <button style='color:red' [ngStyle]="AddCSSStyles()">Click Me </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;
    }
}

What we did here?

1. Here, we add the color style using the style attribute
2. The ngStyle is bounded to AddCSSStyles() method of the AppComponent class. In our Angular ngStyle Directive article, we will discuss this ngStyle in detail.
3. The AddCSSStyles() method returns an object with 3 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.
4. The let is a new type of variable declaration in JavaScript. Instead of let you can also use var here.

In the next article, I am going to discuss the Angular Event Binding with examples. Here, in this article, I try to explain Angular Style Binding with some examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.