An Angular directive for handling click events outside an element. Useful for things like dropdown menus or modal dialogs.

Binds a regular click event in a template.

Installation

npm install --save ng-click-outside

Usage

Add ClickOutsideModule to list of module imports in app.module.ts.

// Close navigation droplists when clicking outisde (e.g. bookmarks)
import { ClickOutsideModule } from 'ng-click-outside';

and

@NgModule({
    declarations: [
        AppComponent,
        ...,
    ],
    imports: [
        ClickOutsideModule,
        ...,
    ],
    providers: [
        ...,
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

Then add the directive to a template (e.g. search-bar.component.html)

<!-- Add directive outside of list and list heading -->
<div class="bookmarks-wrapper" (clickOutside)="onClickedOutside($event)">

    <!-- Inner heading -->
    <div class="bookmarks">
      <p class="bookmarks-button" (click)="onClickShowHideBookmarks()"><a>My Bookmarks</a></p>
    </div>
    
    <!-- Inner list -->
    <div class="bookmarks-list" *ngIf="showBookmarks">
      <ol *ngFor="let bookmark of bookmarks">
        <li class="bookmarks-list-item">
          <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a>
          <span class="delete-button" (click)="deleteBookmark(bookmark)"></span>
        </li>
      </ol>

    </div>
</div>