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(); }}