ionic 5 use "ion-nav" to navigate to simple pages with back button

Question

I'm very new to ionic and have this simple question which to my surprise i cannot find my answer anywhere i search.

what i want is to implement simple page navigation just like this : https://ionicframework.com/docs/api/nav

the source code below the mobile gives javascript codes yet i want in angular/ionic code.

any other documentations use sophisticated codes and for some reason i cannot understand it.

how could i archive this goal with the most simplest code possible for IONIC-5/Angular(using 'ion-nav')?

HTML:

this is what i have gone so far:

<ion-nav root="rootPage">
  
  <ion-header translucent>
  <ion-toolbar>
    <ion-title>Nav</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen>
  <ion-list  *ngFor="let page of techs"> 
   
    <ion-item button (click)="showDetail(page)"> 
        <ion-label>
          <h3>{{page.title}}</h3>
        </ion-label>
      </ion-item> 
  </ion-list>
</ion-content>
</ion-nav>

TS:

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

@Component({
  selector: 'app-list',
  templateUrl: './list.page.html',
  styleUrls: ['./list.page.scss'],
})
export class ListPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  rootPage:any;
  techs = [
    {
      'title': 'Angular',
      'icon': 'angular',
      'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
      'color': '#E63135'
    },
    {
      'title': 'CSS3',
      'icon': 'css3',
      'description': 'The latest version of cascading stylesheets - the styling language of the web!',
      'color': '#0CA9EA'
    },
    {
      'title': 'HTML5',
      'icon': 'html5',
      'description': 'The latest version of the web\'s markup language.',
      'color': '#F46529'
    },
    {
      'title': 'JavaScript',
      'icon': 'javascript',
      'description': 'One of the most popular programming languages on the Web!',
      'color': '#FFD439'
    },
    {
      'title': 'Sass',
      'icon': 'sass',
      'description': 'Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension.',
      'color': '#CE6296'
    },
    {
      'title': 'NodeJS',
      'icon': 'nodejs',
      'description': 'An open-source, cross-platform runtime environment for developing server-side Web applications.',
      'color': '#78BD43'
    },
    {
      'title': 'Python',
      'icon': 'python',
      'description': 'A clear and powerful object-oriented programming language!',
      'color': '#3575AC'
    },
    {
      'title': 'Markdown',
      'icon': 'markdown',
      'description': 'A super simple way to add formatting like headers, bold, bulleted lists, and so on to plain text.',
      'color': '#412159'
    },
    {
      'title': 'Tux',
      'icon': 'tux',
      'description': 'The official mascot of the Linux kernel!',
      'color': '#000'
    },
  ];

  showDetail(page:any){
    const tech = techs.find(tech => tech.title === title);
    nav.push('nav-detail', { tech });
  }
}

P.S: nav.push('nav-detail', { tech }); gives error (i dont know what is nav here)

sebaferreras · Accepted Answer · 2020-12-08T06:37:49.640

Like it's explained in the docs The ion-nav is actually used in some very specific scenarios.

Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.

And

Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

So if you're using Angular, most of the times you could just use the NavController which, behind the scenes, uses the Angular Router.

Please take a look at this Stackblitz demo.

There you can see a very simple example of a page that shows a list of items, and clicking on each items opens a "details" page:

When reviewing that demo project, please pay attention to the app-routing.module.ts file (where the routes for the home and the details modules are defined) and also to the way the data is sent from the HomePage to the DetailsPage.

// app-routing.module.ts file

// ...
const routes: Routes = [
  {
    path: "home",
    loadChildren: () =>
      import("./pages/home/home.module").then(m => m.HomePageModule)
  },
  {
    path: "details/:id",
    loadChildren: () =>
      import("./pages/details/details.module").then(m => m.DetailsPageModule)
  },
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  }
];
// ...

// home.apge.ts file

// ...
public openItem(itemId: number): void {
  this.navCtrl.navigateForward(["details", itemId]);
}
// ...

// details.page.ts file

// ...
ngOnInit() {
  // "id" is the name of the parameter in the
  // app-routing.module.ts file:
  // ==> path: "details/:id",
  const itemId = +this.route.snapshot.params.id;

  this.item = this.itemsService.getItem(itemId);
}
// ...

I'd definitely recommend you to take a look at the Angular Router docs and the Ionic - Angular Navigation docs in order to get more familiar with the routing system used in Ionic 5.

ionic 5 use "ion-nav" to navigate to simple pages with back button

1 Answers1