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

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 >
      <img src="assets/img/norberticon.png" alt="">
  </div>
  <button  aria-label="toggle navigation" (click)="toggleShow()">
      <span ></span>
  </button>

  <nav  *ngIf="isShown">
      <ul  >
          <li ><a routerLink="/" >Home</a></li>
          <li ><a routerLink="about" >About me</a></li>
          <li ><a routerLink="/mywork" >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:

CodePudding user response：

Adding each li element toggleShow() is not work?

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

CodePudding user response：

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