Style Binding in Angular 8

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:

Output:

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

app.component.html:

Output:

Example 3: Conditional styling.

app.component.html:

app.component.ts:

Output: