title: nativescript-angular: UI won't update after using router navigation
body: <p>I'm having an issue after I navigate out of the initial view and then back using routes to this component:</p>
  
  <p><em>map.component.ts</em></p>
  
  <pre><code>import {Component, OnInit, ViewChild } from "@angular/core";
  import {RadSideDrawerComponent, SideDrawerType} from "nativescript-telerik-ui-pro/sidedrawer/angular";
  import {registerElement} from "nativescript-angular/element-registry";
  import {MapView} from "nativescript-google-maps-sdk";
  import * as app from "tns-core-modules/application";
  import {connectToSDK} from "../../utils/connect-sdk";
  
  declare const io;
  declare const zonedCallback: Function;
  
  registerElement('MapView', () =&gt; MapView);
  
  @Component({
    selector: "ns-map",
    templateUrl: "pages/map/map.html",
    styleUrls: ["pages/map/map.css"]
  })
  export class MapComponent implements OnInit {
    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;
    public currentFloor: string;
    public mapHelper: any = null;
  
    constructor() {}
  
    public ngOnInit() {
      connectToSDK();
    }
  
    ngAfterViewInit() {
      this.drawer = this.drawerComponent.sideDrawer;
    }
  
    public openDrawer() {
      this.drawer.toggleDrawerState();
    }
  
    //Map events
    onMapReady(args) {
      const googleMap = args.object.gMap;
      const extension = {
        changedFloor: zonedCallback(this.changeFloor.bind(this))
      };
      const mapListener = io.proximi.proximiiolibrary.ProximiioGoogleMapHelper.Listener.extend(extension);
  
      this.mapHelper = new io.proximi.proximiiolibrary.ProximiioGoogleMapHelper.Builder(app.android.context, googleMap)
        .listener(new mapListener)
        .build();
  
      googleMap.setOnMyLocationButtonClickListener(this.mapHelper);
      googleMap.setOnMapClickListener(this.mapHelper);
      googleMap.setOnCameraIdleListener(this.mapHelper);
      googleMap.setOnMarkerClickListener(this.mapHelper);
      googleMap.setOnCameraMoveStartedListener(this.mapHelper);
      //console.dir(mapHelper);
    }
  
    public floorUp(): void {
      if (this.mapHelper != null) {
        this.mapHelper.floorUp();
      }
    }
  
    public floorDown(): void {
      if (this.mapHelper != null) {
        this.mapHelper.floorDown();
      }
    }
  
    public changeFloor(floor): void {
      if (floor !== null) {
        this.currentFloor = floor.getName();
        console.log('floor changed - ' + this.currentFloor);
      } else {
        this.currentFloor = '';
        console.log('floor exit');
      }
    }
  
  }
  </code></pre>
  
  <p><em>map.view.html</em></p>
  
  <pre><code>&lt;RadSideDrawer tkExampleTitle tkToggleNavButton&gt;
      &lt;StackLayout tkDrawerContent class="sideStackLayout"&gt;
          &lt;ns-drawer&gt;&lt;/ns-drawer&gt;
      &lt;/StackLayout&gt;
  
      &lt;StackLayout tkMainContent&gt;
          &lt;ActionBar title="Proximi.io" class="action-bar"&gt;
              &lt;NavigationButton icon="res://ic_menu" (tap)="openDrawer()"&gt;&lt;/NavigationButton&gt;
              &lt;StackLayout orientation="horizontal"
                           ios:horizontalAlignment="center"
                           android:horizontalAlignment="left"&gt;
                  &lt;Image src="res://logoinlineheading" class="action-image" width="150"&gt;&lt;/Image&gt;
              &lt;/StackLayout&gt;
          &lt;/ActionBar&gt;
          &lt;GridLayout rows="40, *"&gt;
              &lt;StackLayout row="0"&gt;
                  &lt;GridLayout columns="*, 40, 40" class="submenu"&gt;
                      &lt;Label [text]="currentFloor" *ngIf="currentFloor" col="0"&gt;&lt;/Label&gt;
                      &lt;Label text="No floors found at your location!" *ngIf="!currentFloor" col="0"&gt;&lt;/Label&gt;
                      &lt;Button class="fa" [text]="'fa-arrow-up' | fonticon" col="1" (tap)="floorUp($event)" *ngIf="currentFloor"&gt;&lt;/Button&gt;
                      &lt;Button class="fa" [text]="'fa-arrow-down' | fonticon" col="2" (tap)="floorDown($event)" *ngIf="currentFloor"&gt;&lt;/Button&gt;
                  &lt;/GridLayout&gt;
              &lt;/StackLayout&gt;
              &lt;MapView #mapView (mapReady)="onMapReady($event)" row="1"&gt;&lt;/MapView&gt;
          &lt;/GridLayout&gt;
      &lt;/StackLayout&gt;
  &lt;/RadSideDrawer&gt;
  </code></pre>
  
  <p>the problematic is "currentFloor" string which should come from "changeFloor" function, it's showing "currentFloor" fine on first run and also when I reach another view and use the native back button, but in case of navigating to another view and than back by navigation using router it won't change the "currentFloor" in UI while I can see in console that it was assigned successfully to the variable.</p>
  
  <p><em>navigation.html</em></p>
  
  <pre><code>&lt;StackLayout class="sideStackLayout menu"&gt;
      &lt;GridLayout rows="auto" columns="25, *" [nsRouterLink]="['/map']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}" class="menu-item"&gt;
          &lt;Label class="fa" [text]="'fa-map-o' | fonticon" row="0" col="0"&gt;&lt;/Label&gt;
          &lt;Label text="Map Demo" row="0" col="1"&gt;&lt;/Label&gt;
      &lt;/GridLayout&gt;
      &lt;GridLayout rows="auto" columns="25, *" [nsRouterLink]="['/place_list']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}" class="menu-item"&gt;
          &lt;Label class="fa" [text]="'fa-map-marker' | fonticon" row="0" col="0"&gt;&lt;/Label&gt;
          &lt;Label text="Places" row="0" col="1"&gt;&lt;/Label&gt;
      &lt;/GridLayout&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>So to be clear, I have a initial view "/map" where everything works ok, until I navigate to "/place_list" and then still using the router, back to "map" view. After that UI should be changed based on that if any floor has been detected same as was on initial view.</p>
  
  <p><em>app.routing.ts</em></p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { NativeScriptRouterModule } from "nativescript-angular/router";
  import { Routes } from "@angular/router";
  
  import { LoginComponent } from "./pages/login/login.component";
  import { MapComponent } from "./pages/map/map.component";
  
  import { PlaceListComponent } from "./pages/place/list/place-list.component";
  import { PlaceFormComponent } from "./pages/place/form/place-form.component";
  import { PlaceDetailComponent } from "./pages/place/detail/place-detail.component";
  
  
  const routes: Routes = [
      { path: "", redirectTo: "/login", pathMatch: "full"},
      { path: "login",                                component: LoginComponent },
      { path: "map",                                  component: MapComponent },
      { path: "place_list",                           component: PlaceListComponent },
      { path: "place_form/:id",                       component: PlaceFormComponent },
      { path: "place_detail/:id",                     component: PlaceDetailComponent }
  ];
  
  @NgModule({
      imports: [NativeScriptRouterModule.forRoot(routes)],
      exports: [NativeScriptRouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>I'm really grateful for any kind of help. Thanks.</p>