Angular で範囲外のクリックを検知する ng-click-outside

Angular5 がリリースされたが、もう少しだけ Angular4 のままで行くのじゃ。

Angular で、指定の要素外をクリックしたことを検知してトグルメニューを閉じたかった。調べてみると、nativeElement を操作するようなコードで実現できそうとのことだったが、こうした仕組みをラップしている ng-click-outside というライブラリがあったので、コレを使うことにした。

• 参考 : Angularで範囲外をクリックしたイベントを取得する - Qiita
• 参考 : GitHub - arkon/ng-click-outside: Angular directive for handling click events outside of an element.

npm パッケージのインストールは以下のとおり。

# npm install --save の略
$ npm i -S ng-click-outside

次に、NgModule に ClickOutsideModule を追加する。

import { ClickOutsideModule } from 'ng-click-outside';

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

そして、使いたい箇所で (clickOutside) イベントを指定してやれば良い。

<div (clickOutside)="onClickedOutside($event)">要素外がクリックされたことを検知する</div>

コレで OK。メニューのトグル操作など簡単なものであれば、(clickOutside)="toggle = false" といった要領で関数を介さずその場で処理を完結させてしまっても良いだろう。