Create a menu in angular with the currently active class using ngClass directives | E-commerce

Before creating this menu, we need bootstrap and jquery. In the previous section, we saw how to create a routing module according to the different URL for a single page application(SPA) and how to install bootstrap and jquery and added it to the angular.json file. Without our previous step, we would not have this type of menu behavior. So please go and see the steps and come back here.

Let’s go to the code section. Go to the header.component.html and paste the below code

Code: header.component.html

<nav class=”navbar navbar-expand-md bg-dark pb-0″ id=”banner”>

  <div class=”container-fluid “>

  <!– Brand –>

  <a class=”navbar-brand” href=”#”><span>Helper</span>Script</a>

  <!– Toggler/collapsibe Button –>

  <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”>

    <span class=”navbar-toggler-icon”></span>

  </button>

  <!– Navbar links –>

  <div class=”collapse navbar-collapse” id=”collapsibleNavbar”>

    <ul class=”navbar-nav ml-auto”>

      <li class=”nav-item” (click)=”navigate(‘/products’)” [ngClass]=”product ?’active’:””>

        <a class=”nav-link” routerLink=”/products”>Products</a>

      </li>

      <li class=”nav-item” (click)=”navigate(‘/about’)” [ngClass]=”about ?’active’:””>

        <a class=”nav-link” routerLink=”/about”>About</a>

      </li>

      <li class=”nav-item” (click)=”navigate(‘/contact’)” [ngClass]=”contact ?’active’:””>

        <a class=”nav-link” routerLink=”/contact”>Contact</a>

      </li> 

     <!– Dropdown –>

    <li class=”nav-item dropdown”>

      <a class=”nav-link dropdown-toggle” href=”#” id=”navbardrop” data-toggle=”dropdown”>

        Jasim

      </a>

      <div class=”dropdown-menu dropdown-menu-right”>

        <a class=”dropdown-item” href=”#”>email@gmail.com</a>

        <a class=”dropdown-item” href=”#”>Settings</a>

        <a class=”dropdown-item” href=”#”>Logout</a>

      </div>

    </li>

    </ul>

  </div>

  </div>

</nav>

In each and every link we set a (click)event function called navigate and pass the argument as ‘/product’ for the product link.

In the navigate() function, there is a logic we set for each variable to true and false according to navigate(code written in header.component.ts file).

example:

navigate(page){

    console.log(page);

    if(page === ‘/products’){

      this.product = true;

      this.about = false;

      this.contact  = false;

   }else if(page === ‘/about’){

     this.product = false;

     this.about = true;

     this.contact  = false;

   }else if(page === ‘/contact’){

     this.product = false;

     this.about = false;

     this.contact  = true;

   }else{

   }

  } 

By this logic the angular ngClass directive will change class.

example: [ngClass]=”product ?’active’:”

Router Link will redirect the page as per given.

example:

 routerLink=”/products”

It will redirect to localhost:4200/products

Code: header.component.css

@import url(‘https://fonts.googleapis.com/css?family=Gothic+A1|Kaushan+Script|Libre+Baskerville|Lobster’);

.body{

    font-family: ‘Gothic A1’, sans-serif;

    font-size:16px;

    }

    p{

    color:#6c6c6f;

    font-size:1em;

    }

    h1,h2,h3,h4,h5,h6{color:#323233;text-transform:uppercase;}

    .navbar-brand  span{

        color: #fed136;

        font-size:25px;font-weight:700;letter-spacing:0.1em;

        font-family: ‘Kaushan Script’,’Helvetica Neue’,Helvetica,Arial,cursive;

    }

    .navbar-brand {

        color: #fff;

        font-size:25px;

        font-family: ‘Kaushan Script’,’Helvetica Neue’,Helvetica,Arial,cursive;

        font-weight:700;

        letter-spacing:0.1em;

    }

    .navbar-nav .nav-item .nav-link{

        padding: 1.1em 1em!important;

        font-size: 120%;

        font-weight: 500;

        letter-spacing: 1px;

        color: #fff;

       font-family: ‘Gothic A1’, sans-serif;

    }

    .navbar-nav .nav-item .nav-link:hover{color:#fed136;}

    .nav-item.active{

       border-bottom: 4px solid #fed136;

    }

    .navbar-expand-md .navbar-nav .dropdown-menu{

        border-top:3px solid #fed136;

    }

    .dropdown-item:hover{background-color:#fed136;color:#000;}

    nav{-webkit-transition: padding-top .3s,padding-bottom .3s;

        -moz-transition: padding-top .3s,padding-bottom .3s;

        transition: padding-top .3s,padding-bottom .3s;

        border: none;

        }

Code: header.component.ts

 import { Component, OnInit } from ‘@angular/core’;

import {Router} from ‘@angular/router’

@Component({

  selector: ‘app-header’,

  templateUrl: ‘./header.component.html’,

  styleUrls: [‘./header.component.css’]

})

export class HeaderComponent implements OnInit {

   public product = true;

   public about = false;

   public contact  = false;

  constructor(private route:Router) { }

  ngOnInit(): void {

  }

  navigate(page){

    console.log(page);

    if(page === ‘/products’){

      this.product = true;

      this.about = false;

      this.contact  = false;

   }else if(page === ‘/about’){

     this.product = false;

     this.about = true;

     this.contact  = false;

   }else if(page === ‘/contact’){

     this.product = false;

     this.about = false;

     this.contact  = true;

   }else{

   }

  }

}

————————————

After copy and paste the code, just go and run the angular application with ng serve command.

Leave a Reply

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