AngularDart5, event on click outside of an element

Question

Referring to this old post: Angular 2 Dart: How to detect click on everything but element?

I'm trying to do the same thing but document:click doesn't seem to work with AngularDart 5.

Is there any change, or I'm doing something wrong?

header_component.dart

@Component(
  selector: 'app-header',
  templateUrl: 'header_component.html',
  styleUrls: ['header_component.css'],
  directives: [
    coreDirectives,
    routerDirectives,
  ],
  exports: [RoutePaths, Routes],

)
class HeaderComponent {
  final DataService _dataService;
  @ViewChild('profileimg') Element profileImg;
  bool _profileImgSelected = false;

  DataService get dataService => _dataService;
  bool get profileImgSelected => _profileImgSelected;
  bool set profileImgSelected(bool value) => _profileImgSelected = value;

  HeaderComponent(this._dataService);

  @HostListener('document:click', ['\$event'])
  void onDocumentClick(MouseEvent e) {
    print("000000");
    if(profileImg.contains(e.target)) {
      print("111111");
//      _profileImgSelected = !_profileImgSelected;
    } else {
      print("222222");
      _profileImgSelected = false;
    }
  }
}

header_component.html

<header>
    <nav>
        <a [routerLink]="RoutePaths.dashboard.toUrl()"
           [routerLinkActive]="'active-route'">Dashboard</a>
        <!--<a [routerLink]="RoutePaths.orders.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Orders</a>-->
        <!--<a [routerLink]="RoutePaths.warehouse.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Warehouse</a>-->
        <!--<a [routerLink]="RoutePaths.clients.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Clients</a>-->
    </nav>
    <div #profileimg id="profile" *ngIf="dataService.user != null">
        <img id="profile-img" [src]="dataService.user.photoURL" (click)="profileImgSelected=true" width="40" height="40">
        <p id="account-name"><strong>{{dataService.user.displayName}}</strong> ({{dataService.user.email}})</p>
    </div>
    <ul id="account-menu" *ngIf="profileImgSelected">
        <li (click)="dataService.signOut()">Logout</li>
        <li>Settings</li>
    </ul>
    <div id="login" *ngIf="dataService.user == null">
        <a (click)="dataService.signInWithGoogle()">Sign in with Google</a>
    </div>
</header>

score 3 · Accepted Answer · answered Oct 01 '18 at 18:32

3

Support for global event listeners like document:... was removed in Dart Angular 5. You can still use the imperative variant

document.onClick.listen(...)

answered Oct 01 '18 at 18:32

Günter Zöchbauer

623,577
216
2,003
1,567

AngularDart5, event on click outside of an element

1 Answers1