How to close or hide div tag outside click on anywhere on page in angular

Question

I am working on Angular application. Created a custom menu bar using div and select tags. I can successfully open menu-sub items while click on menu bar option. But unable to close the sub-items menu popup while click on outside screen.

Here I have one condition that is I want to close the menu popup only outside page. If I click on any Item inside menu item, it will open.

Example: If I click on Item-1 from popup. The popup remains open. But if I click on outside page it should close.

app.component.html

<div class="select-tab">
  <div class="selects">
    <div>
      <div (click)="popupModel()">
        Items-Popup
      </div>
    </div>
  </div>
  <div *ngIf="showPopupModel" class="workbook-select-pop-up">
    <div class="pop-up-container">
      <div class="pop-up-wrapper">
        <div class="pop-up-list">
          <div style="min-width: 20px; border: none;"></div>
          <div class="list-item">Item-1</div>
          <div class="list-item">Item-2</div>
          <div class="list-item">Item-3</div>
          <div class="list-item">Item-4</div>
          <div class="list-item">Item-5</div>
        </div>
      </div>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'OutSideClick';
  public showPopupModel: boolean = false;
  public popupModel(): void {
    this.showPopupModel=true;
  }   
}

app.component.scss

.select-tab{
    margin-top: 2.25rem;
    height: 64px;
    width: 100%;
    background:#F2F2F2;
    .selects{
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 24px;
        div{
            display: flex;
            align-items: center;
            height: 30px;
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            cursor: pointer;
        }

    }

    .workbook-select-pop-up{
        position: absolute;
        display: flex;
        line-height: 20px;
        .pop-up-container{
            background: #F2F2F2;
            padding-bottom: 25px;
            width: 19rem;
            .pop-up-wrapper{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .pop-up-list{
                    max-height: calc(52px * 2 + 20px);
                    min-height: 20px;
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .list-item{
                        width: 90%;
                        min-height: 30px;
                        border-bottom: 1px solid #494949;
                        justify-content: left;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

The menu bar looks as below

I want to close the menu items POPUP while click on anywhere on outside page .But if i click on Item-1,Item-2,it shouldnot close.Any Ideas or suggestions.

I tried with below menctioned examples but no use.

How to hide div clicking anywhere on page?

https://www.freakyjolly.com/angular-hide-div-on-click-ouside-angular-tutorial/

Thanks in adveance.

How to close or hide div tag outside click on anywhere on page in angular

0 Answers0