Is there a way to close the toggle menu by clicking on the page instead of the toggle button in angular and bootstrap?

Question

I have a navbar inside the component of Angular project. The navbar that is used is responsive and has a toggle button which appears after you reduce the size of the browser window. The purpose of the button is to display or hide the menus when clicked.

What I need is that when Click anywhere instead of the button, it should close the menus that were displaying. This is in the component of Angular Project.

 <div class="row my-row"> 
    <div class="col my-col-1 ">
        <input type="checkbox" id="menu" />
            <label for="menu" class="menu">
                <span></span>
                <span></span>
                <span></span>
            </label>
            <nav class="nav text-white">
                <ul>
                    <li><a routerLink=""><i  class="bi bi-house my-fas"></i> <span class="my-span text-white">&nbsp; Home</span></a></li>
                    <li><a (click)="onClick('feature')" ><i class="bi bi-play my-fas"></i> <span class="my-span">&nbsp; Featured Games</span></a></li>
                    <li><a (click)="onClick('quickPlay')"><i class="bi bi-play my-fas"></i> <span class="my-span">&nbsp; Most Played Games</span> </a></li>
                    <ng-template  [ngIf]="permission">
                        <!-- <li ><a href="#"><i class="fas fa-user my-fas"></i> <span class="my-span">&nbsp; Profile</span></a></li> -->
                        <li (click)="onLogout()"><a href="#"><i class="bi bi-power my-fas"></i> <span class="my-span text-white">&nbsp; Logout</span></a></li>
                        <li (click)="onLogout()"><a href="#"><i class="bi bi-person-x my-fas"></i> <span class="my-span text-white">&nbsp; Unsubscribe</span></a></li>
                    </ng-template>
                    
                </ul>
            </nav>
    </div>
    <div class="col my-col-2">
          <div *ngIf="allow ; else loggedOut">
            <span class="user-name">{{userName}}</span>
            <img src="../../../assets/Avatar/1.png" alt="Avatar" class="avatar">
            
            <div class="dropdown dropleft">
              <span type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="drop-down" > <i style="color: white;" class="ml-4 bi bi-caret-down"></i></span>
              <div class="dropdown-menu " style="margin-right: -50px;margin-top:40px;border-radius: 8px;" aria-labelledby="dropdownMenuButton">
                <!-- <a class="dropdown-item" href="#"><i class="fas fa-user my-fas"></i> <span class="my-span">&nbsp; Profile</span></a> -->
                <a  class="dropdown-item" href="http://gamenow.noeticworld.com/unsub-portal"><i class="bi bi-person-x my-fas"></i> <span class="my-span">&nbsp; Unsubscribe</span></a>
                <a (click)="onLogout()" class="dropdown-item" href="#"><i class="bi bi-power my-fas"></i> <span class="my-span">&nbsp; Logout</span></a>
              </div>
            </div>

          
          </div>
          <ng-template #loggedOut>
            <button style="outline: none;" (click)="onClick('login')" class="my-button">
                Login
            </button>
            <button style="outline: none;" (click)="onClick('login')" class="my-button">
                  Join Now
            </button>
          </ng-template>
    </div>
    
  </div>

Answer 1

You can achieve that functionality by using Host listeners for example within the menu component like this:

@HostListener('document:click')
clickout() {
   // toggle the menu by using its reference
}