Side Navigation bar in Angular

Here, we will learn about how to create a side navigation bar using Angular.

Step 1: Open content.component.html file and add the following in it:

<div class="page-wrapper main-sidebar">
  <div class="page-body">
    <p-toast></p-toast>
    <div class="sidebar">
      <div class="logo-details">
        <a href="#"><img src="../../../../../assets/front-icon/home-page/home.png" /></a>
      </div>
      <ul class="nav-list">
        <li>
          <a routerLink="/home/user-view">
            <i class="bx bx-line-chart"></i>
            <span class="links_name">Chart</span>
          </a>
          <span class="tooltip">Chart</span>
        </li>
        <li>
          <a href="/home/summary">
            <i class="bx bx-folder"></i>
            <span class="links_name">File Manager</span>
          </a>
          <span class="tooltip">Files</span>
        </li>
        <li>
          <a routerLink="/home/new-profile-project">
            <i class="bx bx-grid-alt"></i>
            <span class="links_name">Create</span>
          </a>
          <span class="tooltip">Create</span>
        </li>
        <li>
          <a routerLink="/admin/view-project">
            <i class="bx bx-grid-alt"></i>
            <span class="links_name">View</span>
          </a>
          <span class="tooltip">View</span>
        </li>
        <li>
          <a href="/admin/add-payment">
            <i class="bx bx-wallet-alt"></i>
            <span class="links_name">Payment</span>
          </a>
          <span class="tooltip">Payment</span>
        </li>
        <li>
          <a href="#">
            <i class="bx bx-credit-card"></i>
            <span class="links_name">Bank Cards</span>
          </a>
          <span class="tooltip">Bank Cards</span>
        </li>
        <li>
          <a href="#">
            <i class="bx bx-map-alt"></i>
            <span class="links_name">Map</span>
          </a>
          <span class="tooltip">Map</span>
        </li>

        <!-- <li>
          <a href="#">
            <i class="bx bx-cart-alt"></i>
            <span class="links_name">Order</span>
          </a>
          <span class="tooltip">Order</span>
        </li>
        <li>
          <a href="#">
            <i class="bx bx-heart"></i>
            <span class="links_name">Saved</span>
          </a>
          <span class="tooltip">Saved</span>
        </li>
        <li>
          <a href="#">
            <i class="bx bx-cog"></i>
            <span class="links_name">Setting</span>
          </a>
          <span class="tooltip">Setting</span>
        </li> -->
        <li class="profile">
          <i class="bx bx-log-out" id="log_out"></i>
        </li>
      </ul>
    </div>
    <main class="home-section" [@fadeInAnimation]="getRouterOutletState(o)">
      <router-outlet #o="outlet"></router-outlet>
    </main>
  </div>
</div>

Step 2: Open Content.component.ts file and add the following in it:

import { Component } from '@angular/core'
import { fadeInAnimation } from 'src/app/shared/data/router-animation'

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss'],
  animations: [fadeInAnimation],
})
export class ContentComponent {
  public getRouterOutletState(outlet: any) {
    return outlet.isActivated ? outlet.activatedRoute : ''
  }
}

Step 3: Open router-animation.ts file and add the following in it:

import { trigger, animate, transition, style, query, group, animateChild } from '@angular/animations';

export const fadeInAnimation = trigger('fadeInAnimation', [
    transition('* => *', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%'
            })
        ]),
        query(':enter', [style({ opacity: '0' })], { optional: true }),
        query(':leave', animateChild(), { optional: true }),
        group([
            query(':leave', [animate('.2s ease-in-out', style({ opacity: '0' }))], { optional: true }),
            query(':enter', [animate('.2s ease-in-out', style({ opacity: '1' }))], {
                delay: 300,
                optional: true,
            }),
        ]),
        query(':enter', animateChild(), { optional: true }),
    ])
]);

Step 4: Open app-routing.module.ts file and add following in it:

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { ContentComponent } from './shared/components/layout/content/content.component'
const routes: Routes = [
  {
    path: 'app',
    component: ContentComponent,
  },
  {
    path: '**',
    redirectTo: '',
  },
]
@NgModule({
  imports: [
    [
      RouterModule.forRoot(routes, {
        anchorScrolling: 'enabled',
        scrollPositionRestoration: 'enabled',
        relativeLinkResolution: 'legacy',
      }),
    ],
  ],
  exports: [RouterModule],
})
export class AppRoutingModule { }

Code in action: