Style Data Binding In Angular

In this article, you will learn about 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.
  1. <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.
  1. <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
 
Style Data Binding In Angular 
 
Step 3
 
Open the project in Visual Studio Code and type the following command to open the project.
 
Code:
 
Style Data Binding In Angular 
 
Step 4
 
Open terminal in Visual Studio Code and create a component "employee".
 
ng g c example
 
Style Data Binding In Angular 
 
Step 5
 
Open the example component in your application.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   
  10.   fontSize: number = 80;  
  11. }  
Step 6
 
Open the example.component.html file in your application.
  1. <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.
  1. < <app-example></app-example>  
Step 8
 
Run the application by typing the following command.
 
ng serve --open
 
Style Data Binding In Angular
 

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.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   
  10.   fontSize: number = 80;  
  11.   fontColor: string = "red";  
  12.   IsBold: boolean = true;  
  13.   IsItalic: boolean = true  
  14.   textCenter: string = "center";  
  15.   
  16.   MultipleInlineStyle() {  
  17.     let myStyleClass = {  
  18.       'font-weight'this.IsBold ? 'bold' : 'normal',  
  19.       'font-style'this.IsItalic ? 'italic' : 'normal',  
  20.       'font-size.px'this.fontSize,  
  21.       'color'this.fontColor,  
  22.       'text-align'this.textCenter  
  23.     };  
  24.     return myStyleClass;  
  25.   }  
  26. }  
  27. <h1  [ngStyle]="MultipleInlineStyle()">Welcome to Angular</h1>  
Style Data Binding In Angular
 

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.