document:click not working


I’m trying to make a global click event directive. But document:click does not work for me.

import 'package:angular/angular.dart';

  selector: '[clickOutside]'
class ClickOutsideDirective {

  @HostListener('click', [r'$'])
  void onClick(targetElement){
    print('Target:' + targetElement.toString());

When changing document:click to click I get expected behavior. But of course not globally. What am I doing wrong?


The document: and similar event scopes were removed in Dart.

Use instead

import 'dart:html';

class ClickOutsideDirective implements OnInit, OnDestroy {
  StreamSubscription _docClickSub;
  ngOnInit() {
    _docClickSub = document.onClick.listen((event) {
      print('Target:' +;

  ngOnDestroy() {
    _docClickSub = null;

Answered By – Günter Zöchbauer

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *