Angular 9|8|7 Hide Div on Click Ouside Angular Tutorial

In this tutorial, we will learn how to trigger click events on an element when we click outside of that element container in Angular.

We used to have a target element in JQuery using which we could have easily detected if the clicked element is the same element or its outside that element.

In Angular, we will use a nice package module called ng-click-outside which provides a directive component to trigger click event when we click outside of an element with click event bindings.

 

Let’s check it out in details:

Here we assume that you already have an Angular 2+ version project up and running, if not you can easily create one using Ng CLI tool and run following command in terminal:

$ ng new angular-clickoutside
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

 

Install ng-click-outside

To add Click Outside directive we will install the ng-click-outside package by running following NPM command in terminal:

$ npm install --save ng-click-outside

Import in App Module

To use this directive globally in application components, open app.module.ts file then import ClickOutsideModule and also add in imports array as shown below:

import { ClickOutsideModule } from 'ng-click-outside';
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    ClickOutsideModule
  ],
  bootstrap: [AppComponent]
})
class AppModule {}

How to Use ClickOuside Directive?

To trigger event on click outside on container you simply need to define (clickOutside) on the element as shown below:

<div class="myPage">


  <div class="myBox" 
    (clickOutside)="onClickedOutside($event)" 
    *ngIf="showBox"
    >
    Click outside this box to hide
  </div>

  
</div>

Update component class with the following code:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-clickoutside';

  showBox = true;

  constructor() {}

  onClickedOutside(e: Event) {
    this.showBox = false;
  }
}

Also, add the following CSS in app.component.css file:

.myPage{
    height: 100vh;
    background-color: #dbfff3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.myBox{
    display: flex;
    align-items: center;
    height: 200px;
    width: 200px;
    background-color: #36a7ff;
    justify-content: center;
    background: rgb(68,179,198);
    background: linear-gradient(160deg, rgba(68,179,198,1) 0%, rgba(159,241,178,1) 50%, rgb(129, 221, 185) 100%);
}

Conclusion

We discussed how to trigger element by clicking outside of it by using the ng-click-outside module in Angular application. This can be helpful in case we want to some element on the page like notification, overlays, custom floating sections when the user clicks anywhere on the screen other then that section.