Add a UI Library

Chapter Objectives

✔️

Add a user interface library to your project

Learn how to add Bootstrap (UI library) to your project to enhance your application's user interface.

Not specific to Angular, adding this library will improve the application’s user interface rather than relying on default browser styles.

What is a User Interface (UI) Library?

A user interface (UI) library is a collection of styled and reusable components. They can be used to create a user interface. This allows for creating a consistent appearance throughout the application and saves development time.

For this course, you will add Bootstrap to your project.

How to Add Bootstrap?

Rather than installing it directly and for ease of use, you will use an Angular library that wraps Bootstrap: NG Bootstrap.

The NG-Bootstrap installation command ng add @ng-bootstrap/ng-bootstrap will install Bootstrap as a dependency in your package.json file and add the necessary configuration to your project.

🎓 Instructions

Run the following command in your terminal:
Terminal window
```
ng add @ng-bootstrap/ng-bootstrap@16.0.0
```
Stop the server if it’s still running (keyboard shortcut CTRL+C) and restart it with the following command:
Terminal window
```
ng serve
```

Open the src/app/app.component.html file and replace the content with the following code to add Bootstrap classes:

<header class="navbar bg-body-tertiary px-4">
  <h1 class="navbar-brand fw-bold">Angular Legacy course</h1>
</header>

Check out the small changes in your browser.

✔️ What You Have Learned

You have learned how to add a UI library to your Angular application. Most Angular libraries use the ng add command to simplify the installation process. This avoids relying on the npm install command and additional manual updates to your project configuration.

In the upcoming chapters, you will use Bootstrap classes in HTML snippets to improve the application’s user interface. You won’t need to explore the Bootstrap documentation as the snippets will be provided to you.

bootstrap also refers to application bootstrapping.
This is not the same as adding the Bootstrap UI library to your project.

Bootstrapping refers to the process of initializing an application. It’s the process of loading a set of instructions that will be used to start the application.

For example, Angular uses the src/main.ts file to start the application. This file is the application’s entry point. It’s the first file executed when the application starts.

The main.ts file contains the following code:

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.log(err));