Add an UI Library

Key Learning Objectives

✔️

Add an UI library to your project

Learn how to add Bootstrap, an UI library, to your project to enhance the user interface of your application.

Not specific to Angular, adding this library will enhance the user interface of the application rather then relying on the default browser styles. Discover a comparison of the complete application before and after adding the UI library:

// TODO : add screenshot comparison

What is an UI library?

An UI library is a collection of reusable styled components that can be used to build a user interface. It helps to create a consistent look and feel across the application.

For this course, you’ll add Bootstrap to our project.

How to add Bootstrap

Rather than installing it directly, let’s use an Angular library that wraps Bootstrap to facilitate the installation: NG Bootstrap.

The NG-Bootstrap ng add @ng-bootstrap/ng-bootstrap installation command 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
```
Stop the server if it’s still running 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 Practical course</h1>
</header>

Check out the small changes in your browser.

✔️ What you learned

You learned how to add a library to an Angular application. Most Angular libraries use the ng add command to facilitate the installation process. It avoids relying on npm install command and additional manual updates of your project configuration. The next chapters will use Bootstrap classes in html snippets to enhance the user interface of the application. You won’t need to explore the Bootstrap documentation, as the snippets will be provided for you.

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

Bootstrapping an application refers to the process of initializing an application. It is 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 bootstrap the application. This file is the entry point of the application. It is the first file that is executed when the application starts.

The main.ts file contains the following code:

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

🚦 Quiz

What is Bootstrap?

A. A CSS framework
B. A JavaScript library
C. A UI library
D. All of the above

What is the purpose of ng add?

A. To add a new component to the application
B. To add a new library to the application
C. To add a new service to the application
D. To add a new module to the application