Add UI Library

Chapter Objectives

Choose a UI library
Learn how to select and integrate a UI library in Angular.
Install dependencies
Set up the required UI library packages and dependencies.
Configure styles
Learn how to set up and customize UI library styles.

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.

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've 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.

← Previous Lesson

Getting Started

Next Lesson →

Components Introduction