This section shows the current navigation bar item https://i.sstatic.net/6RAGJ.png
This is the desired outcome when clicking on the tab https://i.sstatic.net/8nFeB.png
Uncertain about the best approach for achieving this. I have attempted to submit a value to the navigate functions, set global values in SharedService, and then retrieve the values from SharedService to display using an ngIf statement in the HTML.
<div class="header-container">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<nav class="navbar navbar-expand-sm navbar-light container">
<a href='#' class="navbar-brand">
<img src="../../assets/images/logo.png" width="100px" height="20" alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-3">
<a (click)="aboutShop()" class="nav-link">About SHOP</a>
</li>
<li class="nav-item mr-3">
<a (click)="workingWithUs()" class="nav-link">Work with Us</a>
</li>
<li class="nav-item mr-3">
<a (click)="pricing()" class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a (click)="help()" class="nav-link">Help</a>
</li>
<li class="nav-item d-none d-sm-block ml-4">
<a href="#" class="nav-link"></a>
</li>
<li class="nav-item">
<a (click)="login()" class="nav-link">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../sharedService';
import {Router} from '@angular/router'
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isHelp:false;
constructor(
private router:Router,
private sharedService: SharedService,
) {
}
ngOnInit(): void {
}
login(){
this.router.navigate(['home/login']);
}
aboutShop(){
this.router.navigate(['home/about-us']);
}
workingWithUs(){
this.router.navigate(['home/working-with-us'])
}
pricing(){
this.router.navigate(['home/pricing'])
}
help(){
this.isHelp =true;
this.router.navigate(['home/help'])
}
}import {Injectable} from '@angular/core'
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class SharedService{
private _help;
set help(value){
this._help = value
}
get help(){
return this._help;
}
}Here's an attempt I made
<li *ngIf="isHelp" class="nav-item" style="border-bottom: 1px solid;">
<a (click)="help()" class="nav-link">Help</a>
</li>
<li *ngIf="!isHelp" class="nav-item">
<a (click)="help()" class="nav-link">Help</a>
</li>