why is the router not updating the data correctly in html template in angular 2?

Question

I have the following resolver:

@Injectable()
export class DashboardDataResolver implements Resolve<division> {
    constructor( private service: dashboardService, private router: Router ) {}

    resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<division> | Promise<division> | any {
        console.log(route.params);
        let id           = route.params[ 'id' ];
        let divisionType = route.params[ 'divisionType' ];
        return this.service.getDivisionData(id, divisionType).then(data => {
            if ( data ) return data;
            else {
                this.router.navigate([ '/dashboard' ]).then(() => 'success');
                return null;
            }
        });
    }
}

A component DashboardMapComponent that contains the two subscription, one to load a couple of geojson files and the other a bunch of other json files that are needed for the application:

ngOnInit(): void {
    this.selectsSubscription = this.dashboardService.loadAllSelects().subscribe(() => this.selectsDataInit());
    this.mapSubscription     = this.service.loadGeoJson().subscribe(() => this.geoJsonInit().then(() => this.onMapsReady()).catch(( error: Error ) => console.log('map not properly loaded')));
}

private selectsDataInit() {
    this.selects = this.route.params.switchMap(( params: Params ) => {
        this.selectedId = params[ 'id' ];
        return dashboardService.getAllSelects();
    })
}

ngOnDestroy(): void {
    this.selectsSubscription.unsubscribe();
    this.mapSubscription.unsubscribe();
}

private geoJsonInit(): Promise<any> {
    return dashboardMapService.getAllGeoJsonData().then(( geoData: Array<Object> ) => this.geoJsonData.push(...geoData))
                              .then(() => this.navigateToDivision('dubai', 'city'))
                              .catch(( error: Error ) => console.log('failed to push geoJsonData'));
}

Note that onMapsReady draws the google maps.

And a DashboardDataComponent that contains the following:

this.subscription = this.route.data.subscribe(( d: { data: division } ) => {
            console.log(d.data);
            this.selectedDistrict = d.data
        });

The problem I am facing is that in the html of DashboardDataComponent, the name of the district I am fetching by clicking on google maps is being displayed the first time, and no longer updates when I play around with the map (it should update to the district if I click on a polygon), the weird thing is that when I log the values in component B, it displays the correct data fetched. The only way to make the html update is to switch between routes and get back to component B.

I navigate in the dashboardMapComponent using the following syntax:

private navigateToDivision( divisionId: string, divisionType: string ): void {
        if ( divisionId ) {
            this.selectedId = divisionId;
            this.router.navigate([ divisionId, { divisionType: divisionType } ], { relativeTo: this.route }).then(() => 'successfully loaded selects');
        }
    }

How can I solve this problem?

Notice the html below the map:

This should update to dubai land when clicked (dubai should be replaced by dubai land) (picture above). The problem, again, is that it only updates AFTER switching to a different route and back to the dashboard.

Additionally, here is my router:

const dashboardCenterRoutes: Routes = [ {
    path: '',
    component: DashboardCenterComponent,
    children: [ {
        path: '',
        component: DashboardMap,
        children: [
            {
                path: ':id',
                component: DashboardDataComponent, resolve: { data: DashboardDataResolver }
            }
        ]
    } ]
} ];

Answer 1

I remember seeing somewhere an identical issue with maps, where change detection wasn't happening for some reason. I can't now find that issue anywhere though...

But you could try resolving this with NgZone

import { Component, OnInit, NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

And wrap the code that is not updating the view in:

this.ngZone.run(() => { ...your code here ...})