angular 2+ ngIf div not appearing except after clicking on page

Question

I have Google maps on the home page and I'm trying to route the user to another page when closing the info window that appears on the map:

// Google map info window code snippet from a @Directive
infowindow.addListener('closeclick', () => {
  this.router.navigate(['/users', user.id]);
});

// Component code
ngOnInit() {
  this.user$ = this.route.params.switchMap((params: Params) => this.service.getUser(params['id']));
}

// UserService
getUser(id: String): Observable < User > {
  return this.apollo.watchQuery < GetUserQueryResult > ({
    query: GetUserQuery,
    variables: {
      id: id
    }
  }).map(({
    data
  }) => data.User);
}

<div *ngIf="user$ | async as user" class="container">
  <p>user.name</p>
</div>

The problem is that when I get to the user page, the div never gets displayed except when actually click on the page once. What's wrong?

I cannot find the necessary packages to demonstrate, especially angular-maps: https://github.com/SebastianM/angular-google-maps — Sammy, Jun 10 '17 at 11:32
@yurzui from what I read elsewhere, I thought this would be related, yes, but I have no idea where to start... — Sammy, Jun 10 '17 at 11:33
Thank you, do you have an example of wrapping any other observable-returning function in `NgZone.run()` that I can see somewhere? — Sammy, Jun 10 '17 at 11:35

score 0 · Accepted Answer · answered Jun 10 '17 at 11:36

0

Running handler code inside angular zone should help you

import { NgZone } from '@angular/core';

...
constructor(private zone: NgZone) {}

infowindow.addListener('closeclick', () => {
  this.zone.run(() => this.router.navigate(['/users', user.id]));
});

angular 2+ ngIf div not appearing except after clicking on page

1 Answers1