Building a modern web application with Angular involves adding some sort of CSS framework to your application. CSS provides a robust and rich set of styling options to manage the look and feel of your web application. However, in many respects, vanilla CSS provides us with only the very basics to build modern, maintainable styles for our web applications. Luckily, similar to the advancements made in JavaScript compilation, there has been a revolution in CSS-based pre-compilers that add many useful enhancements and features to the CSS standard.

In this chapter we will cover common CSS configurations for Angular, including how to use the most popular CSS preprocessor, Sass. We will also take a look at a variety of ways we can use Sass that is unique to working within Angular-CLI that can streamline our frontend development productivity.

Angular-CLI supports all the major CSS preprocessors, including Sass, Less, and Stylus. Although each of these options has its own unique features and language syntax, Sass is, by far, the most popular CSS preprocessor used for web applications. For that reason it is what we will focus on in this book.

Sass works as as superset to CSS in a similar way that TypeScript acts as a superset of JavaScript in Angular. Our Sass styles will compile during our Angular-CLI build process, and output vanilla CSS for the browser. It will also allow us to use many useful features, such as defining variables, nesting for selectors for improved specificity, and better organizing our styles for reusable and composable styling.

Angular has a unique way of isolating styles on components in our application by scoping CSS selectors to dynamically generated component selectors. This approach gives us component-level style isolation that will prevent our component's styles from leaking across the rest of our application.

Let's add some component styles to our /src/app/app.component.ts and /src/app/posts/posts.component.ts components. We'll give our header some padding between it and the blog content below it. Adding negative space to our user interface like this will make our blog content easier to read. We will frame the blog content itself with a border and a silver background color.

A very handy advantage of using Sass is to define commonly used values in our styles as variables so that they can be easily reused in our project's styling.

Imagine that our Angular application has a very simple two-color theme for its background and text. For our navigation, we simply want to reverse the same two colors of theme for the background and text. With Sass, we can define these colors once and then apply them to the correct properties for the objects we want to style, without copying and pasting hexadecimal color definitions around.

We can define two-color variables by defining them in our /src/styles.scss stylesheet:

$background-color: #585858;
$text...

Another advantage of Sass is the ability to nest selectors to increase their styling specificity, as well as make relationships between content styles more manageable. Sass's ability to nest selectors helps enforce selector specificity through a clear visual relationship with its parent selectors. This makes creating style hierarchies in your application much more visually apparent in the stylesheet itself.

Imagine that we have two styles of links, one that is for our general content and another that is, specifically, for our navigation. We really want to be certain that these links are styled the same way, except for their coloring. We could write these as...

Sass has more features than just its advanced CSS syntax and language features. It also allows us to more easily modularize our styles into partials for easier reuse and configuration. The modularization aspect of Sass partials is one of the most powerful features for organizing and maintaining your app's styling.

Let's make the color definitions for our web application's Sass variables a separate configuration file from our other Sass files. This will make updating our branding or any other color configuration changes much easier to find and make in our application.

In this section, we will discuss how to import CSS frameworks and utilities into our application to set up a basic, responsive layout in our Angular application using Bootstrap. Bootstrap is a very popular CSS framework developed by Twitter for responsive web design that works on a wide range of devices, from desktop computers to mobile phones. The latest version of Bootstrap 4 includes many improvements, including switching from Less to Sass for its source files, a new flex-box-based grid system, and many optimizations and performance tweaks to better support mobile devices.

Our Angular application may be modern on the inside, but its user interface is very retro looking, without...

Configuring Bootstrap will let you customize the parts of the Bootstrap framework you include in your application. Loading fewer parts of Bootstrap will reduce your file size, thus, increasing the performance of compiling your Sass stylesheets.

Loading all of Bootstrap is great, but what if we don't want or need all of the Bootstrap framework in our Angular application? Let's remove all the built-in JavaScript components used by Bootstrap so that we can implement our own Angular-based versions instead.

One of the best reasons to use a CSS framework such as Bootstrap is to more easily support responsive layouts in our web application. Using Bootstrap's layout classes and breakpoints, we can easily add responsive design to our Angular application.

Bootstrap 4 supports a modern flex-box-based responsive grid system. To use the grid system, we will need to declare a container that will contain the grid, rows for each line of elements we will lay out in the container, and columns for each item in the row:

>

We can compose any combination of column widths together that we want as long as the total within the row adds up to 12 or fewer. Otherwise our column content will...

Bootstrap 4 contains many different JavaScript-dependent components. Many of these components rely on jQuery for Document Object Model (DOM) manipulation and can adversely interact with Angular's own View Encapsulation based data-binding. We will solve this issue using the Angular-friendly versions of these components provided by the ng-bootstrap project.

Let's add an accordion component to our web application, so we can group blog posts by their author. When the user clicks on the author's name, they will see a list of blog posts they created.

In order to build this functionality, we will need to install and save the ng-bootstrap project as a dependency...

Unlike the preceding version of Bootstrap, Bootstrap 4 does not come with a built-in icon set. You get to choose the icon set you'd like to include for your application.

The Font-Awesome project is a very popular font-based icon set with a robust collection of high-quality icons that cover a wide range of common application functionalities, all available for free as an open source resource.

Let's enhance our new Bootstrap accordion component by putting a user icon next to all our author's names and a newspaper icon next to their blog post titles. Before we can get started, we will need to install font-awesome as a dependency to our project. We will do...

Modern web applications can often support millions of users distributed across the globe. Even if the audience for your application is limited, the advantages you gain from building an application supporting multiple languages or localized date and time formatting can be very important for any international customers who use it. Luckily, Angular has an advanced toolkit for managing translations and localizing content in our application.

To translate text files in Angular, we will use the i18n attribute that comes built-in with Angular core. We will use this tool to mark strings in our application for translation and run a utility in Angular-CLI to extract them. Once we've extracted the strings, we can hand them off as a static file to be translated, and we will be able to import this file to display a localized language version of our...

Although ahead-of-time (AOT) compilation of template strings can be useful, users may often wish to be able to manually decide the language that they would like to see, and have that served to them as a just-in-time (JIT) option. To support this, we will need to add providers to Angular to watch for a locale setting we can use to determine our user's language preference.

Let's configure our application to display whatever language the browser is defaulted to using. That way, content will automatically be displayed in any translation that matches the machine that they are using to access our application.

Before we can get started, to take advantage of just-in-time...

Many countries format dates and times in a different way. For example, between the US and UK, the order of months and days is often reversed in shortened dates. For example, 12/5/2017 is December 5th, 2017 (MM/DD/YYYY) in the US, while it would mean May 12th, 2017 (DD/MM/YYYY). Unlocalized date format can be potentially very confusing to your users and is an easy localization option offered by Angular's built-in Pipes helper.

Let's follow the steps to add date localization to our blog posts so that they will display in the format our readers would expect:

1. We'll start by adding a simple date object to our /src/app/posts/post/post.component.ts component:

postDate...