Hide div if I click on the class in Angular - html

Question

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:

Answer 1

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>

Answer 2

CSS3:
Create one hide and one show property as -
.hidden{
display:none;
}
.show{
display:block; //or inline etc
}
JavaScript:
const elementToBeHidden = document.
querySelector('.classselector');
const ToggleShow =()=>{
elementToBeHidden.classList.toggle('hidden');
}
This will effectively toggle between hiding and showing any element you want to as many times you want.
Note that this is just psuedocode to clear up the logic
Hope this helps you.....PEACE OuT 👍