Angular NgStyle and Style Binding Example
June 19, 2020
On this page we will provide Angular NgStyle
and style binding example. Style binding binds an inline style property with a given value and NgStyle
sets more than one inline styles dynamically. Style binding is used in the same way as property binding is used. Style binding can bind only one inline CSS property at one time. When we want to use more than one style property at one time dynamically then the role of NgStyle
directive comes into picture. NgStyle
and style property binding both can be used with bracket [] and bind- keyword. Here on this page we are providing the example for style binding and NgStyle
with style properties such as color, font-size, background-image. Now find the complete example step-by-step.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
Style Binding
The use of style binding is to set inline styles. The syntax is same as we use in property binding with the difference that style binding starts with style.
. Find the syntax for style binding.
[style.style-property] = "style-value"
Here
style
is a prefix and style-property
is a name of a CSS style property. style
prefix and style property are concatenated using dot (.)
. Style property binding can be achieved with bracket [], bind- keyword and interpolation {{}}. Now find the code to use style binding.
<p [style.color] = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> <p bind-style.color = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> <p style.color = "{{result > 30 ? 'blue' : 'green'}}"> Hello Color World! </p>
result > 30
returns true then color style will be set to blue otherwise green. Let us know about conditional operator.
Conditional (ternary) Operator
Conditional operator that is also called ternary operator, is used as a short cut of if else statement. Find the syntax as below.
condition ? expr1 : expr2
When the condition is true then expr1 will be returned otherwise expr2 will be returned.
NgStyle
NgStyle
directive is used to set many inline styles dynamically. Setting styles using NgStyle
works as key:value pair. key is the style property name and value is the style value. Find the code snippet.
myStyles = { 'color': this.colorFlag ? 'black' : 'yellow', 'font-size.em': this.isSmall ? this.small/5 : this.big/5, 'background-image': !this.isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')' };
myStyles
. To use this set we will create a component method as following.
getMyStyles() { let myStyles = { 'color': this.colorFlag ? 'black' : 'yellow', 'font-size.em': this.isSmall ? this.small/5 : this.big/5, 'background-image': !this.isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')' }; return myStyles; }
let
keyword is to define a local variable. In this way myStyles
variable has only method scope. NgStyle
can be used with bracket [], bind- keyword. Our method getMyStyles()
can be called by ngStyle
as follows.
<div [ngStyle]="getMyStyles()"> NgStyle Example </div>
myStyles
set. NgStyle
directive should be used over style binding when we want to set many inline styles at one time dynamically.
NgStyle with Background Image
To load background image the style propertybackground-image
is used. Its value is given in the following syntax.
url('images/red.gif')
In inline style binding we can use it as follows.
<div [style.background-image] = "isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')'"> Style Binding Example </div>
NgStyle
the key:value pair is created as following.
'background-image': !this.isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')'
Complete Example
app.component.ts
import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { result = 50; colorFlag = false; isSmall = true; isBackgroundRed = false; small = 10; big = 15; num = 10; isRed(num) { if (num > 10) { return false; } else { return true; } } allRequiredStyles(styleSet) { let myStyles; if(styleSet == 'one') { myStyles = { 'color': this.colorFlag ? 'black' : 'yellow', 'font-size.em': this.isSmall ? this.small/5 : this.big/5, 'background-image': !this.isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')' }; } else if(styleSet == 'two') { myStyles = { 'color': !this.colorFlag ? 'black' : 'yellow', 'font-size.em': !this.isSmall ? this.small/5 : this.big/5, 'background-image': this.isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')' }; } else { myStyles = { 'background-color': this.colorFlag ? 'cyan' : 'grey', 'font-size.%': !this.isSmall ? this.small * 10: this.big * 10 }; } return myStyles; } }
<p [style.color] = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> <p bind-style.color = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> <p style.color = "{{result > 30 ? 'blue' : 'green'}}"> Hello Color World! </p> <button [style.background-color] = "colorFlag ? 'cyan' : 'grey'" [style.color] = "isRed(8) ? 'red' : 'black'" > Button </button> <div [style.font-size.em] = "isSmall ? small/8 : big/8" > Font Size Test with em</div> <div [style.font-size.px] = "!isSmall ? small : big" > Font Size Test with px</div> <div [style.font-size.pt] = "isSmall ? small : big" > Font Size Test with pt</div> <div [style.font-size.%] = "!isSmall ? small * 10: big * 10" > Font Size Test with %</div> <div [style.background-image] = "isBackgroundRed ? 'url(\'/assets/images/red.gif\')' : 'url(\'/assets/images/green.gif\')'"> Style Binding Example </div> <br/><br/> <div [ngStyle]="allRequiredStyles('one')"> NgStyle Example </div> <br/><br/> <div bind-ngStyle="allRequiredStyles('two')"> NgStyle Example </div>
import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.
