How to use ion-nav Ionic 7

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

Generate three pages

To generate an Ionic page, you can use the following command in your terminal:

ionic generate page about
ionic generate page contact
ionic generate page profile

Replace <page-name> with the name you want to give to your page. This command will create a folder with the specified name in the src/app directory of your Ionic project.

Inside the folder, you will find four files:

<page-name.module.ts>: This file exports a module for your page. You can add any required dependencies to this module.

<page-name.page.ts>: This file contains the TypeScript code for your page. You can add the logic for your page here.

<page-name.page.html>: This file contains the HTML code for your page. You can define the structure and layout of your page here.

<page-name.page.scss>: This file contains the SCSS code for your page. You can define the styles for your page here.

After generating the page, you will need to add it to your app-routing.module.ts file to set up routing for your page.

That's it! You have now generated an Ionic page.

ion-nav

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

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. For example, you should not push a new component to ion-nav and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

ion-nav is a component in Ionic 7 that provides navigation functionality in your app. Here are the basic steps to use ion-nav:

1. In your app's main module, import RouterModule and Routes from @angular/router:

Define your app's routes using the Routes array:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutPageModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./contact/contact.module').then( m => m.ContactPageModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./profile/profile.module').then( m => m.ProfilePageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ion-nav and root

In this example, we have defined four routes: a default route that redirects to the home page, and three pages: home, about, and contact.

1. In your app's template, use ion-nav to display the pages:

2. In this example, we use the root property to specify the initial page to display.

3. In your app's component, set the rootPage property to the initial page:

4. In this example, we set the rootPage to 'about', so the home page will be displayed when the app loads.

5. In each of your page components, import NavController from ionic-angular:

6. In your page component's constructor, inject NavController:

This will give you access to the navigation controller, which you can use to push and pop pages.

7. To navigate to another page, use the navCtrl.navigateForward('about') and navCtrl.back(); methods:

home.page.ts

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

constructor(public navCtrl: NavController) {}

  openPage() {
    this.navCtrl.navigateForward('about')
  }
}

home.page.html

<ion-header>
  <ion-toolbar color="tertiary">
    <ion-title>Page</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <h1>Page home</h1>
  <ion-nav-link router-direction="forward" (click)="openPage()">
    <ion-button color="tertiary">Go to about page</ion-button>
  </ion-nav-link>
</ion-content>

about.page.html

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons slot="start">
      <ion-button (click)="onGoBack()"><ion-icon name="arrow-back-outline"
          size="large"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title>home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <h1>Page About</h1>
  <ion-nav-link router-direction="forward" (click)="openPage()">
    <ion-button color="danger">Go to contact page</ion-button>
  </ion-nav-link>
</ion-content>

about.page.ts

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class AboutPage {

constructor(public navCtrl: NavController) {}

  openPage() {
    this.navCtrl.navigateForward('about')
  }
  onGoBack() {
    this.navCtrl.back();
  }
}

In this example, we push the about page onto the navigation stack. That's it! With these steps, you should be able to use ion-nav to navigate between pages in your Ionic 7 app.