Add UI Library

Branch

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.

1. Run the following command in your terminal:

   npm install tailwindcss @tailwindcss/postcss postcss daisyui@latest --force

2. Configure PostCSS plugins

   Create a file named .postcssrc.json in the root of your project and add the following content:

    {
      "plugins": {
      "@tailwindcss/postcss": {}
      }
    }

3. Import styles into the src/styles.cssfile:

   @import "tailwindcss";
   @plugin "daisyui";

4. Stop the server if it’s still running (keyboard shortcut CTRL+C) and restart it with the following command:

   ng serve

5. Open the src/app/app.ts file and replace the template 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>

6. Check out the small changes in your browser.

   

• Bootstrap Documentation

• NG Bootstrap Documentation

• Angular CLI: ng add command