UI:UX Tutorial for Angular

UI/UX Tutorial for Angular – NgBootstrap, Primeng, Material – Tree, Accordion, Stepper, Megamenu, Tabs

In this tutorial, you will learn how to setup and use the top 5 UI components in Angular Material, Primeng and Bootstrap. I have decided to use these three libraries so that you can choose whichever is easier for you.

I would also teach you how to solve some of the problem you may encounter while setting up these libraries.

Let’s begin by creating a demo project!

  1. Setup the Demo Projects and Install Modules
  2. Create the components and Navigation
  3. Start with NgBootstratp
  4. On to Angular Materials
  5. Let’s do Primeng!

All videos in my YouTube Channel

 

1. Setup the Demo Project and Install Modules

Create a new angular project. I named it uidemo

Add Angular material module using the command:

npm install @angular/material --save

 

Add Bootstrap and ngBootstrap with the command:

npm install bootstrap --save

npm install --save @ng-bootstrap/ng-bootstrap 

Finally, add the Primeng module:

npm install primeng --save

 

Then remember to import bootstrap and Angular material into your styles.css file like so:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~angular-material/angular-material.css";

 

2. Setup the Components and Navigations

We need to also add the Bootstrap template. So just copy a bootstrap template from the Bootstrap website into your app component.

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Top navbar</a>
    <button class="navbar-toggler" type="button" aaria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" >Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<main class="container">
<router-outlet></router-outlet>
</main>

 

Next, create your components and add navigation to the home page. You can see the video for the step by step.

 

3. Start with NgBootstrap. Bootstrap?

First, as a rule of thumb: if you are working on an Angular project, always prefer NgBootstrap.

Add the NgbModule to the exports section of the app.module.ts file. (See the video to see how to fix error you may encounter).

Got to the NgBootstrap website here. You’ll find lots of examples. Let’s try some of them out!

 

4. On to Angular Material

As a UI/UX expert, you should know that just one library may not give you all the UI components you need. Or perhaps, one library provides a better element that the other. Or it may just be that it’s easier to implement in a particular library.

For instance, if you are working with Dates and Times in Angular, then you should know that NgBootstrap does it better.¬† That’s why I recommend you know at least how to use these libraries (Bootstrap, NgBootstrap, Angular-Material and Primeng)

I’ll be making series of videos on how to implements various elements.

So let’s do exactly the same tabbed panel, but this time using Angular Material

  1. Create a new component using Ng new. I call it angular-tab
  2. Create a route in the app-routing ts file for this component
  3. Add this component to the navigation
  4. Ensure that the MatTabsModule is added to the imports section of your app.module.ts
  5. Finally, copy the code for Tabs from the Angular materials example site

Note: If you encounter errors, you an use the command below.

ng update

Then you can do the necessary update. If the error persists, do let me know in the comment below or in the video.

I would recommend you try out other examples yourself. Or just follow the step by step in the video.

 

5. On to Primeng!

Primeng just like Angular Material contains a large collection of UI component. However, Primeng is considered by many to have  a richer set of components. But as a UI/UX expert, you should be able to choose what use to implement particular usecases.

  1. First create a new component. I call it primedemo
  2. Add the route for this component in the app routing module ts file
  3. Let’s try to do exactly the same thing here.
  4. So go to the Primefaces website and copy the code for TabbedPanel.

Follow the steps in the video to complete this one.

 

Admin bar avatar

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published. Required fields are marked *