Global CSS

We have a functioning app, but it looks hideous. We’re going to be deploying the application so that the world can enjoy our fantastic little app. However, before we do, let’s add some styling to make it more presentable. Angular makes loading CSS into our app simple.

Installing Bootstrap

There are various CSS frameworks available. Any of them will work with Angular. Feel free to use whichever framework you prefer. This is not a CSS course. Hence, the reason we’ll be installing a framework to help us with CSS. It’s a quick and easy way to add some styles to an app.

For this app, we’ll be using Bootstrap. We’ll need to install it using the following command:

npm install bootstrap

The next thing we’ll do is import the Bootstrap CSS. There are two ways we can approach this.

Importing CSS

The first way is to use the src/styles.css file. This file is a stylesheet that will be applied globally to the application. We’ll use it to add Bootstrap to our project. At the top of the file, we’ll import the CSS.

@import 'bootstrap/dist/css/bootstrap.min.css';

angular.json

The second way is to update the angular.json file. We briefly looked at the angular.json file in an earlier lesson. This file can be used to configure how our Angular project is compiled. It’s the settings that the CLI will use when serving and building the project.

Let’s review the relevant properties.

The first layer will have a property called projects. This is a list of projects in the current directory. We only have one. Inside it, we’ll find the reverse-phrase project. This is where we can configure the settings for this specific project.

Inside the project’s settings, there’s a property called architect. The architect property can be used to configure how the CLI will build the project corresponding to the command that’s building the project.

"architect": {
  "build": {},
  "serve": {},
  "extract-i18n": {},
  "test": {},
  "lint": {},
  "e2e": {}
}

If we look inside this object, the name of the properties will correspond to the commands in the package.json file. We can tell the CLI to build the project differently, depending on what we’re doing.

We’re going to be modifying the build property. You may be wondering, “Why the build property instead of the serve property?” It’s true: we are running the ng serve command for development.

However, the serve command uses the build command behind the scenes. This means both the serve and build objects are used. The serve object takes priority and will overwrite the properties in the build object.

There are some overlapping properties between both objects. You’ll be able to figure out which property will be used by observing them. In the build object, there’s a property called options, where we can configure additional options for the build.

Inside it, there’s an array called styles. This is an array of CSS files that should be bundled with the project. The CSS will be applied globally to the application. styles is not defined in the serve object, so we can add it to the build object since it will be merged with the serve object.

Taking a closer look, we’ll notice the src/styles.css file is there. We can add on to this array to load the Bootstrap CSS, as shown here:

"styles": [
  "src/styles.css",
  "bootstrap/dist/css/bootstrap.min.css"
]

We aren’t going to load the CSS in the angular.json file. It’s a matter of preference. I find modifying the src/styles.css file to be more comprehensible.

Updating the HTML

One final step is to update the template to use the classes in the Bootstrap framework. The changes we make will be purely cosmetic. We aren’t going to modify the bindings or interpolation we added to the template.