Skip to content
Related Articles

Related Articles

Style Binding in Angular 8
  • Difficulty Level : Expert
  • Last Updated : 14 Sep, 2020

It is very easy to give the CSS styles to HTML elements using style binding in Angular 8. Style binding is used to set a style of a view element. We can set the inline styles of an HTML element using the style binding in angular. You can also add styles conditionally to an element, hence creating a dynamically styled element.

Syntax:

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

Example 1:

app.component.html:

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<h1 [style.color] = "'green'" 
    [style.text-align] = "'center'" >
  GeeksforGeeks
</h1>

chevron_right


Output:

Example 2: Setting the size of the font using style binding.

app.component.html:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<div [style.color] = "'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

chevron_right


Output:

Example 3: Conditional styling.

app.component.html:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<div [style.color]="status=='error' ? 'red': 'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

chevron_right


app.component.ts:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  status = "All good";
}

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :