Hide div if I click on the class in Angular

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:

Fiehra · Accepted Answer · 2022-03-12 07:35:42Z

4

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>

edited Mar 12, 2022 at 7:35

Fiehra

8271 gold badge9 silver badges29 bronze badges

answered Mar 11, 2022 at 18:40

Vugar Taghiyev

4334 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haider Raza · Accepted Answer · 2022-03-11 18:49:54Z

0

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 👍

answered Mar 11, 2022 at 18:49

Haider Raza

4855 silver badges8 bronze badges

Collectives™ on Stack Overflow

Hide div if I click on the class in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related