title: Navigate with parameters in latest NativeScript with Angular and TypeScript
body: <p>I want to navigate to another page with parameters, but I can't seem to find documentation that explains it well. I am using routes. Here is an example of my routes.</p>
  
  <pre><code>import { RouterConfig } from '@angular/router';
  import { nsProvideRouter } from 'nativescript-angular/router';
  import { MainPage } from './pages/main/main.component';
  import { DetailsPage } from './pages/details/details.component';
  
  export const routes: RouterConfig = [
      { path: "", component: MainPage },
      { path: "details", component: DetailsPage }
  ];
  
  export const APP_ROUTER_PROVIDERS = [
      nsProvideRouter(routes, {})
  ];
  </code></pre>
  
  <p>I want to navigate to the DetailsPage with the parameters of what was selected on MainPage. Here is an excerpt of MainPage:</p>
  
  <pre><code>import { Page } from 'ui/page';
  import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
  import { Entity } from '../../shared/entity/entity';
  
  @Component({
      selector: "main",
      templateUrl: "pages/main/main.html",
      styleUrls: ["pages/main/main-common.css", "pages/main/main.css"]
  })
  export /**
   * MainPage
   */
  class MainPage {
  
      constructor(private _page: Page, private _router: Router) { }
  
      onNavigate(selectedItem: Entity) {
          // Can't figure out how to get selectedItem to details…
          this._router.navigate(["/details"]);
      };
  }
  </code></pre>
  
  <p>Inserted: Below I added the detail class.</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Entity } from '../../shared/entity/entity';
  import { EntityModel } from '../../shared/entity/entity.model';
  
  @Component({
      selector: "detail",
      templateUrl: "pages/detail/detail.html",
      styleUrls: ["pages/detail/detail-common.css", "pages/detail/detail.css"],
      providers: [EntityModel] 
  })
  export /**
   * DetailPage
   */
  class DetailPage implements OnInit, OnDestroy {
  
      entity: Entity;
  
      private _paramSubcription: any;
  
      constructor( private _activatedRoute: ActivatedRoute, private _entityModel: EntityModel ) { }
  
      ngOnInit() {
          console.log("detail ngOnInit was called.");
          let entityName: string;
          this._paramSubcription = this._activatedRoute.params.subscribe(params =&gt; entityName = params['id']);
          this.entity = this._entityModel.entityNamed(entityName);
      };
  
      ngOnDestroy() {
          if (this._paramSubcription) {
              this._paramSubcription.unsubscribe();
          };
      };
  }
  </code></pre>
  
  <p>Here is the template for Detail:</p>
  
  <pre><code>&lt;ActionBar [title]="entity.name"&gt;&lt;/ActionBar&gt;
  &lt;ListView [items]="entity.items"&gt;
      &lt;Template let-item="item"&gt;
          &lt;StackLayout&gt;
              &lt;Label [text]="item.name"&gt;&lt;/Label&gt;
              &lt;Label [text]="item.description"&gt;&lt;/Label&gt;
          &lt;/StackLayout&gt;
      &lt;/Template&gt;
  &lt;/ListView&gt;
  </code></pre>
  
  <p>I have found classes like a <code>NavigationContext</code> and methods <code>navigateTo</code> and <code>navigateFrom</code>, but I haven't figured out how to send the <code>NavigationContext</code> to the <code>Page</code>. Or if it even should be sent that way. So the question is, what is the best way to use <code>Routing</code> to navigate to another page (not a dialog) and pass parameters?</p>