Style Binding in Angular 8
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
<h1 [style.color] = "'green'"
[style.text-align] = "'center'" >
GeeksforGeeks
</h1>
|
Output:
Example 2: Setting the size of the font using style binding.
app.component.html:
HTML
<div [style.color] = "'green'"
[style.text-align] = "'center'"
[style.font-size.px]="'24'" >
GeeksforGeeks
</div>
|
Output:
Example 3: Conditional styling.
app.component.html:
HTML
<div [style.color]="status=='error' ? 'red': 'green'"
[style.text-align] = "'center'"
[style.font-size.px]="'24'" >
GeeksforGeeks
</div>
|
app.component.ts:
Javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
status = "All good";
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...