All geek questions in one place

Angular 2 Dart: how to detect a click on everything except an element?

In an application with many different components inside the same component, I have a custom Auto Suggestion window. The box should be closed if the user clicks anywhere, but in the "Automatic offer" field (or contains elements of the "Automatic offer" window).

This is what I would do in jQuery:

$(document).on('click','body',function(e) {
if(e.target!='.suggestbox' && $(e.target).parent('.suggestbox').length <1 ) {
$('.suggestbox').remove();
}
});

However, in my Angular Dart templates, I have:

index.html

<body>
<my-app>
// sub component
// sub sub component
</my-app>
</body>

I might think about the possibility of detecting a click on the top shell in the my-app component and sending this action to a subcomponent, but this is not a mouse click yet.

What is the best way to solve this problem?

+4
1
<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
    }
  }      
}

, div - , .

. Angular2 , ?

+6

Source: https://habr.com/ru/post/1677014/

More articles:


All Articles