Hide div if I click on the class in Angular

Issue

I am making a Hamburger menu for my Angular practice (version 13).

When I click on the hamburger icon it hides and opens the menu (toggle), but I also want to hide the menu after I clicked on one of the elements (Home,About me,My work).

My planned solution is to hide the nav class if I click on one of the nav__item classes.

My Header Component:

Html:

<header>
  <div class="logo">
      <img src="assets/img/norberticon.png" alt="">
  </div>
  <button class="nav-toggle" aria-label="toggle navigation" (click)="toggleShow()">
      <span class="hamburger"></span>
  </button>

  <nav class="nav" *ngIf="isShown">
      <ul class="nav__list" >
          <li class="nav__item"><a routerLink="/" class="nav__link">Home</a></li>
          <li class="nav__item"><a routerLink="about" class="nav__link">About me</a></li>
          <li class="nav__item"><a routerLink="/mywork" class="nav__link">My Work</a></li>
      </ul>
  </nav>

</header>

.Ts code that toggles the Menu:

  isShown: boolean = false ; // hidden by default


  toggleShow() {
  
  this.isShown = ! this.isShown;
  
  }

The Menu:

Solution

Adding toggleShow() function to each li element does not work?

<li class="nav__item"><a routerLink="/" class="nav__link" (click) = "toggleShow()">Home</a></li>
<li class="nav__item"><a routerLink="about" class="nav__link" (click) = "toggleShow()">About me</a></li>
<li class="nav__item"><a routerLink="/mywork" class="nav__link" (click) = "toggleShow()">My Work</a></li>

Answered By - Vugar Taghiyev