Style Data Binding In Angular

Introduction

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

What is style binding in Angular?

Style data binging is used to set the style in View's HTML elements. We can use the inline style to set the style in the element. We can also set inline style using style binding in Angular.

What is the difference between style binding and class binding?

Style binding is used to set a style of a View element. We can set inline styles with style binding.

<h1 [style.font-size.px]="fontSize">Welcome to Angular</h1>

Class binding is used to set a class property of a View element. We can add and remove the CSS class names from an element's class attribute with class binding.

<h1 [class]="myClass">Welcome to Angular</h1>

Step 1

Open the command prompt from Windows search.

Step 2

Create a new project in Angular

ng new AngularDemo

Step 3

Open the project in Visual Studio Code and type the following command to open the project.

Code:

Step 4

Open terminal in Visual Studio Code and create a component "employee".

ng g c example

Step 5

Open the example component in your application.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
fontSize: number = 80;
}

Step 6

Open the example.component.html file in your application.

<h1 [style.font-size.px]="fontSize">Welcome to Angular</h1>

Step 7

Open the app.component.html file in your application to take selector name from the employee.component.ts file.

< <app-example></app-example>

Step 8

Run the application by typing the following command.

ng serve --open

How to set multiple inline styles

If you want to set multiple inline styles, then you need to use the ngStyle directive. The ngStyle is used to bind to MultipleInlineStyle() method.

MultipleInlineStyle() 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.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
fontSize: number = 80;
fontColor: string = "red";
IsBold: boolean = true;
IsItalic: boolean = true
textCenter: string = "center";
MultipleInlineStyle() {
let myStyleClass = {
'font-weight': this.IsBold ? 'bold' : 'normal',
'font-style': this.IsItalic ? 'italic' : 'normal',
'font-size.px': this.fontSize,
'color': this.fontColor,
'text-align': this.textCenter
};
return myStyleClass;
}
}
<h1 [ngStyle]="MultipleInlineStyle()">Welcome to Angular</h1>

Summary

In this article, I have explained style data binding in an Angular application. I hope you understand the concept of style binding with the examples.