It’s easy to bind inline style in your Angular 2 templates. Here’s how you would bind a single style value for example:
<p [style.background-color]="'darkorchid'">
Quite something!
</p>
You can also specify the unit, here for example we set the unit in em, but px, % or rem could also be used:
<p [style.font-size.em]="'3'">
A paragraph at 3em!
</p>
And here’s how you would conditionally set a style value depending on a property of the component:
<p [style.font-size.px]="isImportant ? '30' : '16'">
Some text that may be important.
</p>
Simple style binding is great for single values, but for applying multiple styles the easiest way is to use NgStyle:
<p [ngStyle]="myStyles">
You say tomato, I say tomato
</p>
And then myStyles would be a property in the component that contains an object with css property names as the keys, like this:
myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}
Or it could be provided inline like this:
<p [ngStyle]="{'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'}">
You say tomato, I say tomato
</p>
Or the object can be the return value of a method:
<p [ngStyle]="setMyStyles()">
You say tomato, I say tomato
</p>
In the associated component class
setMyStyles() {
let styles = {
'background-color': this.user.isExpired ? 'red' : 'transparent',
'font-weight': this.isImportant ? 'bold' : 'normal'
};
return styles;
}
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.