ionic 3 angular navigation from one page to another

1
votes

i am building a website which means it has multiple pages. and a global navigation which u can click to go from one page to another.

For now say i have two pages: Home, and Sales. From going home page to sales i did something like:

<ion-icon name="briefcase" style="zoom:3;color:#d31145" [navPush]="optyPage"></ion-icon>
<ion-label color="kelloggs" style="font-weight: bold">Sales</ion-label>

and in .ts

import { OpportunitiesPage } from '../opportunities/opportunities'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  optyPage = OpportunitiesPage;

  constructor(public navCtrl: NavController) {

  }
}

Question is from opty page do i just do another navPush to go to home? or some other recommended way? also i don't know if i need to worry about clicking the home button while i am still on home (making to navpush calls)

2
angulartypescriptnavigationionic3

2 Answers

1
votes

You can just use [navPop]directive.

Directive to declaratively pop the current page off from the navigation stack.

<ion-content>

 <button ion-button navPop>Go Back</button>

</ion-content>

Oficial doc

0
votes

You do not want to push Home back onto the nav stack again. What you can simply do (and what I recommend) is add the following code to your opportunities.html

<ion-header>
  <ion-navbar>
    <ion-title>Your Title</ion-title>
  </ion-navbar>
</ion-header>

Adding ion-navbar will give you a Back button in the header. When the back button is clicked it does a navPop on the navStack and will take you back to your Home page.