Simple page navigation in Angular 2

gciluffo

Hello all, im trying to get some simple page navigation going in OnsenV2 and Angular 2. I have a home page with a button, I want to be able to click that button and push a page of a different component to the stack and be able to navigate backward with the back button. When i press the button, the KeyEnterUPC component loads up. However, there is no default animation, and I am not able to navigate backward. Also when i press the button, the console says: EXCEPTION: Error: Uncaught (in promise): Error: You must supply an “ons-page” element to “ons-navigator”. Anyone have any idea as to why it isnt pushing to the stack properly? Help would be much appreciated. Here is the home page (home.ts)

import {ONS_DIRECTIVES} from 'angular2-onsenui';
import {MyApp} from './../app/app';
import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';
import {OnsNavigator} from "angular2-onsenui/dist/src/angular2-onsenui";
import {Component, Inject, forwardRef, ViewChild} from '@angular/core';

@Component({
  selector: 'ons-page',
  directives: [ONS_DIRECTIVES],
  template: `
         <ons-button  (click)="pushUPC()" modifier="large--cta" style="background-color:orangered;">
        </ons-button>
  `
})
export class HomePage {
  constructor(@Inject(forwardRef(() => OnsNavigator)) private navi : OnsNavigator) {
  }

  pushUPC() {
    this.navi.element.pushPage(KeyEnterUPC);
  }
}

And here is the component I want to load after pressing button (KeyEnterUPC.ts).

import {ONS_DIRECTIVES} from 'angular2-onsenui';
import {MyApp} from './../app/app';
import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';
import {OnsNavigator} from "angular2-onsenui/dist/src/angular2-onsenui";
import {Component, Inject, forwardRef, ViewChild} from '@angular/core';

@Component({
  selector: 'ons-page',
  directives: [ONS_DIRECTIVES],
  template: `
<ons-page>
  <ons-toolbar style="background: transparent;">
    <div class="left">
      <ons-back-button style="color: black;">Back</ons-back-button>
    </div>
  </ons-toolbar>
  <div class="content">
      <h1>This is the EnterUPC Component</h1>
  </div>
</ons-page>
  `
})
export class HomePage {
  constructor(@Inject(forwardRef(() => OnsNavigator)) private navi : OnsNavigator) {
  }
}

And finally the app component that contains the ons-navigator tags (app.ts)

import {Component, Inject, forwardRef, ViewChild} from '@angular/core';
import {ONS_DIRECTIVES, OnsSplitterContent, OnsSplitterSide, OnsNavigator} from 'angular2-onsenui';
import {HomePage} from './../home/home';
import {MenuPage} from './../menu/menu';
import {AboutPage} from './../about/about';
import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';

@Component({
  selector: 'app',
  directives: [ONS_DIRECTIVES],
template: `
<ons-page>
  <ons-navigator page="home.html">

  </ons-navigator>
</ons-page>

  `
})
export class MyApp {

}

Or, can anyone lead me to a simple example of pushing a component to the page stack besides in the monaca template?

Fran Diox

@gciluffo Hello! I don’t know too much about Angular 2 yet but perhaps this can help you. If you are interested, you can get that template with Monaca CLI.

gciluffo

@Fran-Diox Thanks for the reply, but do you know of any other examples that have to do with navigating separate components?

Simple page navigation in Angular 2 browsing