title: border in nav-bar item when displaying current page
body: <p>This is the current nav-bar-item
  <a href="https://i.stack.imgur.com/6RAGJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6RAGJ.png" alt="This is the current nav-bar-item" /></a></p>
  <p>This is the r.esult I want when clicking into the tab
  <a href="https://i.stack.imgur.com/8nFeB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8nFeB.png" alt="This is the result I want when clicking into the tab" /></a></p>
  <p>I am not sure whats the best approach to this.
  I have tried by submitting a value to the navigate functions. and setting the global values in sharedService, and after, getting the values from sharedService to place with ngIf statement in html.</p>
  <pre><code>&lt;div class=&quot;header-container&quot;&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
  
          &lt;div class=&quot;col-md-12 col-sm-12&quot;&gt;
  
              &lt;nav class=&quot;navbar navbar-expand-sm navbar-light container&quot;&gt;
                  &lt;a href='#' class=&quot;navbar-brand &quot;&gt;
                      &lt;img src=&quot;../../assets/images/logo.png&quot; width=&quot;100px&quot; height=&quot;20&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;
  
                  &lt;/a&gt;
                  &lt;button class=&quot;navbar-toggler&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarMenu&quot;&gt;
                      &lt;div class=&quot;navbar-toggler-icon&quot;&gt;&lt;/div&gt;
                  &lt;/button&gt;
  
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarMenu&quot;&gt;
                      &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
                          &lt;li class=&quot;nav-item mr-3&quot;&gt;
                              &lt;a (click)=&quot;aboutShop()&quot; class=&quot;nav-link&quot;&gt;About SHOP&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-item mr-3&quot;&gt;
                              &lt;a (click)=&quot;workingWithUs()&quot; class=&quot;nav-link&quot;&gt;Work with Us&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item mr-3&quot;&gt;
                              &lt;a (click)=&quot;pricing()&quot; class=&quot;nav-link&quot;&gt;Pricing&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a (click)=&quot;help()&quot; class=&quot;nav-link&quot;&gt;Help&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-item d-none d-sm-block ml-4&quot;&gt;
                              &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a (click)=&quot;login()&quot; class=&quot;nav-link&quot;&gt;Login&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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'])
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I tried something like this</p>
  <pre><code>                            &lt;li *ngIf=&quot;isHelp&quot; class=&quot;nav-item&quot; style=&quot;border-bottom: 1px solid;&quot;&gt;
                              &lt;a (click)=&quot;help()&quot; class=&quot;nav-link&quot;&gt;Help&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf=&quot;!isHelp&quot; class=&quot;nav-item&quot;&gt;
                              &lt;a (click)=&quot;help()&quot; class=&quot;nav-link&quot;&gt;Help&lt;/a&gt;
                          &lt;/li&gt;
  </code></pre>