Style Binding in Angular 17

In Angular, creating visually appealing and dynamic user interfaces is important for delivering an engaging user experience. One such powerful feature is Style Binding. It allows you to dynamically apply CSS styles to HTML elements based on component data or expressions. In this article, we'll explore more about Style Binding.

Prerequisites:

• Angular Basics
• CSS

What is Style Binding?

Style binding in Angular provides a way to dynamically set CSS styles for HTML elements. It enables you to define styles inline or conditionally based on component properties or expressions. By using style binding, you can create interfaces that adapt to user interactions, application state changes, or other dynamic factors.

Syntax:

<element [style.style-property] = "'style-value'">

Features

• Dynamic Inline Styles: Style binding allows you to dynamically apply inline styles to HTML elements based on component data or expressions. This feature enables you to change the appearance of elements dynamically without modifying the CSS file.
• Object Style Binding: Object style binding enables you to apply multiple styles conditionally based on component data. By binding to an object containing style properties, you can dynamically compute and apply styles based on various conditions.
• Dynamic Class Application: In addition to inline styles, style binding also supports dynamic class application. You can conditionally apply CSS classes to HTML elements based on component properties or expressions, allowing for flexible and responsive styling.
• Conditional Styling: Angular's template syntax allows for conditionally applying styles based on component data or expressions. This feature enables you to create interfaces that adapt to user interactions, application state changes, or other dynamic factors.
• Computed Styles: With style binding, you can compute styles dynamically based on component logic.

Steps to implement Style Binding

Step 1: Create the Angular Project using the following command.

ng new <YOUR_PROJECT_NAME>

Folder structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Examples

Example 1: Dynamic style binding

<!-- app.compoenent.html -->

<h1>Hello GeeksForGeeks</h1>
<p
  style=""
  [style.font-weight]="'bold'"
  [style.font-size.px]="60"
  [style.background-color]="'grey'"
  [style.border]="'5px solid yellow'"
>
  This is Style Binding
</p>

Output:

Example 2: Static-style binding

<!-- app.component.html -->

<h1>Hello GeeksForGeeks</h1>
<p
  [style.font-weight]="isbold"
  [style.background-color]="backgroundColor"
  [style.border]="'2px solid ' + borderColor"
  [style.font-size.px]="fontsize"
>
  Hello Geeks
</p>

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'style-binding';
    isbold = 'bold'
    fontsize = 80
    backgroundColor = 'red'
}

Output: