Angular Style Binding

In the previous two articles, we’ve learned about Property Binding and Class Binding. This tutorial will be all about Style Binding in Angular.

What is Style Binding in Angular?

Style Binding is used to give inline CSS styles to the HTML elements. Thus, we can make dynamic styled elements with the help of style binding and apply conditions to that.

Let’s see the syntax of Style Binding:

<h1 [style.color]="'green'">STYLE BINDING TUTORIAL</h1>

Example 1

The syntax is similar to Class Binding, i.e., a start-up with square brackets and within square brackets style followed by a dot followed by color, a CSS property that we want to bind. And to this, we can assign the color as String value within double and single cots.

Output:

angular style binding example 1

In Style Binding it is also possible to use the conditional operators to assign a value to the CSS property.

Let’s see the syntax of that:

<h1 [style.color]="hasError ? 'red' : 'green'">STYLE BINDING TUTORIAL</h1>
  • Angular will evaluate the expression, and if hasError is set to true, the text will appear red, and if false, then green.
  • hasError is a property that is defined in the ts file.

Example 2

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  hasError = false;
}

Here the hasError is set to false; hence the text will appear in green on the browser.

angular style binding example 2

We can also change the color of HTML elements dynamically or according to the user interaction as well.

Syntax

<h1 [style.font-style]="textSpecial">STYLE BINDING TUTORIAL</h1>
  • font-style is a CSS property.
  • textSpecial is the property defined in the component.ts file in which value italic is assigned.

Example 3

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  textSpeical = "italic";
}

Output:

angular style binding example 3

And similar to the ngClass directive, we also have the ngStyle directive, which is used to apply multiple styles.

Let’s see the Syntax to understand this:

<h1 [style]="heading">STYLE BINDING TUTORIAL</h1>

The heading is the object that we’ve created in the component.ts file.

Example 4

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'my-app';
  heading = {
    color: "blue",
    textAlign: "center",
    fontStyle: "italic"
  }
}

The heading object contains the different style properties and their value as a String inside it.

NOTE: The CSS property, which consists of “—,” should be written in Camel Case.

Output:

angular style binding example 4

Conclusion

We hope that your concepts on Style Binding are fully cleared, and now we’re ready to move on to some other topics. In this tutorial, we’ve learned how we can dynamically apply colors on HTML elements and also how we can apply multiple CSS properties into an HTML element. In the next articles, we’ll be learning about Event Binding and many more important topics of Angular.

Read Next: Angular Event Binding

Leave a Reply

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