Corredor

ウェブ、プログラミングの勉強メモ。

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

Angularアプリケーションプログラミング

Angularアプリケーションプログラミング

はじめてのAngular4 (I・O BOOKS)

はじめてのAngular4 (I・O BOOKS)

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

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

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" といった要領で関数を介さずその場で処理を完結させてしまっても良いだろう。