{"id":1975,"date":"2021-05-27T12:00:00","date_gmt":"2021-05-27T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/ui-ux-tutorial-for-angular-ngbootstrap-primeng-material-tree-accordion-stepper-megamenu-tabs\/"},"modified":"2026-07-05T03:25:35","modified_gmt":"2026-07-05T01:25:35","slug":"ui-ux-tutorial-for-angular-ngbootstrap-primeng-material-tree-accordion-stepper-megamenu-tabs","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/ui-ux-tutorial-for-angular-ngbootstrap-primeng-material-tree-accordion-stepper-megamenu-tabs\/","title":{"rendered":"UI\/UX Tutorial for Angular \u2013 NgBootstrap, Primeng, Material \u2013 Tree, Accordion, Stepper, Megamenu, Tabs"},"content":{"rendered":"

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.<\/p>\n

I would also teach you how to solve some of the problem you may encounter while setting up these libraries.<\/p>\n

Let’s begin by creating a demo project!<\/p>\n

    \n
  1. Setup the Demo Projects and Install Modules<\/a><\/li>\n
  2. Create the components and Navigation<\/a><\/li>\n
  3. Start with NgBootstratp<\/a><\/li>\n
  4. On to Angular Materials<\/a><\/li>\n
  5. Let’s do Primeng!<\/a><\/li>\n<\/ol>\n

    All videos in my YouTube Channel<\/a><\/p>\n

     <\/p>\n

    1. Setup the Demo Project and Install Modules<\/strong><\/h5>\n

    Create a new angular project. I named it uidemo<\/em><\/p>\n

    Add Angular material module using the command:<\/p>\n

    <\/p>\n

    npm install @angular\/material --save\r\n<\/pre>\n
     <\/p>\n
    Add Bootstrap and ngBootstrap with the command:<\/p>\n
    <\/p>\n
    npm install bootstrap --save\r\n\r\nnpm install --save @ng-bootstrap\/ng-bootstrap \r\n<\/pre>\n
    Finally, add the Primeng module:<\/p>\n
    <\/p>\n
    npm install primeng --save\r\n<\/pre>\n
     <\/p>\n
    Then remember to import bootstrap and Angular material into your styles.cs<\/em><\/strong>s file like so:<\/p>\n
    @import \"~bootstrap\/dist\/css\/bootstrap.css\";\r\n@import \"~angular-material\/angular-material.css\";\r\n<\/pre>\n
     <\/p>\n
    2. Setup the Components and Navigations<\/strong><\/h5>\n
    We need to also add the Bootstrap template. So just copy a bootstrap template from the Bootstrap website into your app component.<\/p>\n
    <\/p>\n
    <nav<\/span> class=<\/span>\"navbar navbar-expand-md navbar-dark bg-dark mb-4\"<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"container-fluid\"<\/span>><\/span>\r\n    <a<\/span> class=<\/span>\"navbar-brand\"<\/span> href=<\/span>\"#\"<\/span>><\/span>Top navbar<\/a><\/span>\r\n    <button<\/span> class=<\/span>\"navbar-toggler\"<\/span> type=<\/span>\"button\"<\/span> aaria-label=<\/span>\"Toggle navigation\"<\/span>><\/span>\r\n      <span<\/span> class=<\/span>\"navbar-toggler-icon\"<\/span>><\/span><\/span>\r\n    <\/button><\/span>\r\n    <div<\/span> class=<\/span>\"collapse navbar-collapse\"<\/span> id=<\/span>\"navbarCollapse\"<\/span>><\/span>\r\n      <ul<\/span> class=<\/span>\"navbar-nav me-auto mb-2 mb-md-0\"<\/span>><\/span>\r\n        <li<\/span> class=<\/span>\"nav-item\"<\/span>><\/span>\r\n          <a<\/span> class=<\/span>\"nav-link active\"<\/span> aria-current=<\/span>\"page\"<\/span> href=<\/span>\"#\"<\/span>><\/span>Home<\/a><\/span>\r\n        <\/li><\/span>\r\n        <li<\/span> class=<\/span>\"nav-item\"<\/span>><\/span>\r\n          <a<\/span> class=<\/span>\"nav-link\"<\/span> href=<\/span>\"#\"<\/span>><\/span>Link<\/a><\/span>\r\n        <\/li><\/span>\r\n        <li<\/span> class=<\/span>\"nav-item\"<\/span>><\/span>\r\n          <a<\/span> class=<\/span>\"nav-link disabled\"<\/span> href=<\/span>\"#\"<\/span> tabindex=<\/span>\"-1\"<\/span> ><\/span>Disabled<\/a><\/span>\r\n        <\/li><\/span>\r\n      <\/ul><\/span>\r\n      <form<\/span> class=<\/span>\"d-flex\"<\/span>><\/span>\r\n        <input<\/span> class=<\/span>\"form-control me-2\"<\/span> type=<\/span>\"search\"<\/span> placeholder=<\/span>\"Search\"<\/span>><\/span>\r\n        <button<\/span> class=<\/span>\"btn btn-outline-success\"<\/span> type=<\/span>\"submit\"<\/span>><\/span>Search<\/button><\/span>\r\n      <\/form><\/span>\r\n    <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/nav><\/span>\r\n\r\n<main<\/span> class=<\/span>\"container\"<\/span>><\/span>\r\n<router<\/span>-outlet<\/span>><\/span><<\/span>\/router-outlet>\r\n<\/main><\/span>\r\n<\/pre>\n
     <\/p>\n
    Next, create your components and add navigation to the home page. You can see the video for the step by step.<\/p>\n
     <\/p>\n
    3. Start with NgBootstrap. Bootstrap?<\/strong><\/h5>\n
    First, as a rule of thumb: if you are working on an Angular project, always prefer NgBootstrap.<\/p>\n
    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).<\/p>\n
    Got to the NgBootstrap website here<\/a>. You’ll find lots of examples. Let’s try some of them out!<\/p>\n
     <\/p>\n
    4. On to Angular Material<\/strong><\/h5>\n
    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.<\/p>\n
    For instance, if you are working with Dates and Times in Angular, then you should know that NgBootstrap does it better.\u00a0 That’s why I recommend you know at least how to use these libraries (Bootstrap, NgBootstrap, Angular-Material and Primeng)<\/p>\n
    I’ll be making series of videos on how to implements various elements.<\/p>\n
    So let’s do exactly the same tabbed panel, but this time using Angular Material<\/p>\n
      \n
    1. Create a new component using Ng new. I call it angular-tab<\/li>\n
    2. Create a route in the app-routing ts file for this component<\/li>\n
    3. Add this component to the navigation<\/li>\n
    4. Ensure that the MatTabsModule is added to the imports section of your app.module.ts<\/li>\n
    5. Finally, copy the code for Tabs from the Angular materials example site<\/li>\n<\/ol>\n
      Note<\/strong>: If you encounter errors, you an use the command below.<\/p>\n
      ng update\r\n<\/pre>\n
      Then you can do the necessary update. If the error persists, do let me know in the comment below or in the video.<\/p>\n
      I would recommend you try out other examples yourself. Or just follow the step by step in the video.<\/p>\n
       <\/p>\n
      5. On to Primeng!<\/strong><\/h5>\n
      Primeng just like Angular Material contains a large collection of UI component. However, Primeng is considered by many to have\u00a0 a richer set of components. But as a UI\/UX expert, you should be able to choose what use to implement particular usecases.<\/p>\n
        \n
      1. First create a new component. I call it primedemo<\/li>\n
      2. Add the route for this component in the app routing module ts file<\/li>\n
      3. Let’s try to do exactly the same thing here.<\/li>\n
      4. So go to the Primefaces website and copy the code for TabbedPanel.<\/li>\n<\/ol>\n
        Follow the steps in the video to complete this one.<\/p>\n
         <\/p>\n","protected":false},"excerpt":{"rendered":"
        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 … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1975","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1975"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions"}],"predecessor-version":[{"id":2143,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions\/2143"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}