Angular 16 Bootstrap 5 Add Vertical Menus to Offcanvas Sidebar Popup | Admin Dashboard Creation

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 16 Bootstrap 5 Add Vertical Menus to Offcanvas Sidebar Popup | Admin Dashboard Creation.

Angular15 came and if you are new then you must check below link:

1. Angular 16 Tutorials

Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 16 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 16:

npm install -g @angular/cli

ng new angularform // Set Angular 16 Application on your pc

cd angularform // Go inside project folder

2. Now run below commands to set bootstrap 5 modules into our angular 16 application for responsiveness (optional):

npm install bootstrap

npm i @popperjs/core

npm i bootstrap-icons

3. Now friends we just need to add below code into angularform/angular.json file (optional):

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
          ],
"scripts": [
              ...
                "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
           ]

4. Finally we will add below code into our angularform/src/app/app.component.html file:

<div class="container p-5">
   
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
        Button with data-bs-target
      </button>
      
      <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasExampleLabel">Admin</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="nav flex-column">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled">Disabled</a>
                </li>
              </ul>
       
        </div>
      </div>
</div>

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks