Thursday, 29 April, 2021 UTC
Summary
In this post we look at style binding and also at the ngStyle directive and how it helps solve for the limitations that style bindings have had in the past. These are some handy tricks when you’re getting started in Angular!
Angular
Angular, Google’s JavaScript (TypeScript) framework for building web applications, mobile or desktop, has over 72,000 stars on GitHub. It’s maintained by the Angular team at Google and a host of community members and organisations.
Before You Start
To be able to follow through in this article’s demonstration you should have:
- An integrated development environment like VS Code
- Node version 11.0 or higher installed on your machine
- Node Package Manager version 6.7 or higher (usually ships with Node installation)
- Angular CLI version 8.0 or higher
- Version 8 of Angular or higher
- Download this tutorial’s starter project here to follow through the demonstrations.
- Unzip the project and initialize the node modules in your terminal with this command:
npm install
In this post, you will learn how to use the ngStyle directive for component element styling in your Angular projects.
Styles in Angular
Angular is designed to be very modular and component based, this means that every component has its own style sheet and the styles defined inside are scoped to that particular component by default. There is also a global style sheet for global styles in the root directory of every Angular project.
Style Binding
In Angular, you can easily apply inline styles to HTML elements of your choice with style binding. Let’s dive into how this is actually done
Demo
If you followed this post from the start, you would have downloaded and unzipped the Angular canvas from GitHub. Let us see how these work in a real Angular application that prints and styles tech courses in a university portal. Load up the app in your integrated development environment (I use VS Code) and open the app.component.html file and clean it up to look like this:
<div style="text-align:center">
<h1> Welcome to the Fake Tech University </h1>
</div>
<app-courses></app-courses>
<router-outlet></router-outlet>
To keep things modular, let’s create a new component, and call it courses. In your terminal, run this command below:
ng generate component courses
Open your courses.component.ts file and replace the code there with the code block below:
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-courses",
templateUrl: "./courses.component.html",
styleUrls: ["./courses.component.css"]
})
export class CoursesComponent implements OnInit {
public isCourse = true;
courses = [
{
name: "Introduction to Web Development",
level: "Beginner",
color: "green"
},
{
name: "Understanding APIs",
level: "Beginner",
color: "green"
},
{
name: "Introduction to Docker Containers",
level: "Advanced",
color: "red"
},
{
name: "Understanding Time complexities",
level: "Advanced",
color: "red"
},
{
name: "Algorithms and Data Structures",
level: "Advanced",
color: "red"
},
{
name: "My first HTML page",
level: "Beginner",
color: "green"
},
{
name: "Ways to use CSS in your web page",
level: "Beginner",
color: "green"
},
{
name: "Introduction to Unit testing",
level: "Beginner",
color: "green"
},
{
name: "What are PWAs",
level: "Beginner",
color: "green"
}
];
constructor() {}
ngOnInit() {}
}
In this component, I created an array of objects of all the tech courses and their various levels for the semester.
Now for the presentation, go to the courses.component.html file and replace the placeholder content with the code block below inside it:
<p>
All Beginner courses are colored green and all advanced courses are colored red.
</p>
<ul>
<li *ngFor="let course of courses">
{{ course.name }}
</li>
</ul>
If you run the application now you will see that it looks something like this:
To style the component using the style binding approach, let us make all the list items green. Inside your courses.component.html file, copy the code block below:
<p>
All Beginner courses are colored green, all intermediate courses are colored
blue and all advanced courses are colored red.
</p>
<ul>
<li *ngFor="let course of courses" [style.color]="'green'">
{{ course.name }}
</li>
</ul>
If you save the file and go back to the browser, you will find that all the list items are now colored green.
You can decide to define the colors in your array or object and then assign the property to the style rule instead of explicitly setting “green” like so:
<p>
All Beginner courses are colored green, all intermediate courses are colored
blue and all advanced courses are colored red.
</p>
<ul>
<li *ngFor="let course of courses" [style.color]="course.color">
{{ course.name }}
</li>
</ul>
The application in your browser at localhost:4200 should look like this:
What if we wanted to add conditions to these inline styling?
Using Conditions
Remember we had a class definition isCourse in our courses.component.ts file? Using that, we can specify a condition for a style to be applied like this:
<p>
All Beginner courses are colored green, all intermediate courses are colored
blue and all advanced courses are colored red.
</p>
<ul>
<li *ngFor="let course of courses" [style.color]="isCourse? 'red': 'green'">
{{ course.name }}
</li>
</ul>
This tells Angular to make the color of the list items red if the isCourse class is true and if not, make it green.
Limitation of the Style Binding Approach
Style binding as we have seen so far has a limitation. Imagine you also wanted to change the font size of the application we are using today. Your code block would look like this:
<ul>
<li *ngFor="let course of courses" [style.color]="isCourse? 'red': 'green'"
[style.font-size]="'24px'">
{{ course.name }}
</li>
</ul>
You can already see how inefficient and messy your presentation will look with a lot of styles defined independent of the other. The Angular team solved this problem with the ngStyle directive.
ngStyle Directive
ngStyle is an attribute directive that updates styles for the containing HTML element in your component. It is used to set one or more style properties, specified as colon-separated key-value pairs. The key is a style name, with an optional . suffix (such as “top.px”, “font-style.em”). The value is an expression to be evaluated. The resulting non-null value, expressed in the given unit, is assigned to the given style property. If the result of evaluation is null, the corresponding style is removed.
Here is how it is implemented by Angular:
@Input()
ngStyle: { [klass: string]: any; }
It is used like an object declaration, so you can have more than one CSS style rule, separated by commas. For our demo application, joining the two styles about font and color with ngStyle can be simply done like this:
<p>
All Beginner courses are colored green and all advanced courses are colored
red.
</p>
<ul>
<li *ngFor="let course of courses"
[ngStyle]="{'color': course.color, 'font-size':'24px'}">
{{ course.name }}
</li>
</ul>
It would look like this in your browser when you save your files in the VS Code IDE:
With this you can lay out more than one style rule for an element or a set of elements from loops or conditionals. The complete code to this tutorial can be found here on GitHub.
Conclusion
This is an overview of style binding and how it is done in Angular. We also looked at the ngStyle directive and how it helps solve for the limitations that style bindings were having in the past. Happy hacking!