Add UI Library

Chapter Objective

Set up the UI library dependencies and files

This lesson is not specific to Angular, but adding an UI library will enhance the application’s user interface rather than relying on default browser styles. It’ll make your experience way better at checking the changes in your browser!

Do not forget to always stop the project server before installing new dependencies. You can do this by pressing CTRL+C in the terminal where the server is running. The server and package installation can run independently. However, after installing certain dependencies, you might need to restart the server to apply the changes.

What is a User Interface (UI) Library?

A user interface (UI) library is a collection of style rules to create a consistent UI throughout the application and saves development time. For this course, you will add DaisyUI to your project.

Instructions

Run the following command in your terminal to install DaisyUI:
Terminal window
```
npm install daisyui@latest
```
Add the plugin to the src/styles.css file:
styles.css
```
@import "tailwindcss";
@plugin "daisyui";
```
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.html file and replace its content once again to add a DaisyUI header:

<div class="navbar bg-base-100 shadow-sm">
  <a class="btn btn-ghost text-xl">Task Manager</a>
</div>

Check out the small changes in your browser.

What you've learned

You learned how to add a UI library to your Angular application. In the upcoming chapters, HTML snippets will include DaisyUI classes to enhance the application’s user interface. You won’t need to explore the DaisyUI documentation as all required classes will be included in snippets..