Angular 2 Dart: How to detect click on everything but element? Angular 2 Dart: How to detect click on everything but element? dart dart

Angular 2 Dart: How to detect click on everything but element?


<button (click)="show = true">show dropdown</button><div #suggestbox *ngIf="show">...</div>
class AutoSuggestComponent {  bool show = false;  @ViewChild('suggestbox') ElementRef suggestbox;  @HostListener('document:click', [r'$event'])  onDocumentClick(MouseEvent e) {    if((suggestbox.nativeElement as HtmlElement).contains(e.target)) {      // inside the dropdown    } else {      // outside the dropdown    }  }      }

not tested and the button and div element are only a rough approximation of what the component would look like.

See also How can I close a dropdown on click outside?

update

Angular 5 doesn't support global event handlers like document:...

Use instead the imperative variant

class AutoSuggestComponent implements AfterViewInit, OnDestroy {  bool show = false;  @ViewChild('suggestbox') ElementRef suggestbox;  StreamSubscription _docClickSub;  @override  void ngAfterViewInit() {    _docClickSub = document.onClick.listen((e) {      if((suggestbox.nativeElement as HtmlElement).contains(e.target)) {        // inside the dropdown      } else {        // outside the dropdown      }    });  }  @override  void onDestroy() {    _docClickSub?.cancel();  }}