How to use ion-router 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.

ion-router

The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system.

ion-router is just a URL coordinator for the navigation outlets of ionic: ion-nav, ion-tabs, and ion-router-outlet.

That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav, ion-tabs, and ion-router-outlet what and when to "show" based on the browser's URL.

Generate pages

Sure, here's an example of how to generate an Ionic page:

1. Open your terminal or command prompt.
2. Navigate to your Ionic project directory.
3. Run the following command:

Replace "page-name" with the name you want to give your new page. For example, if you want to create a page called "home", the command would be:

ionic generate page about

ionic generate page contact

ionic generate page profile

ionic generate page posts

For each page about, contact, profile and posts must be look like this code

about.page.html

  <ion-header>
    <ion-toolbar color="danger">
      <ion-buttons slot="start">
        <ion-back-button default-href="/" routerLink="/home"></ion-back-button>
      </ion-buttons>
      <ion-title>Page contact</ion-title>
    </ion-toolbar>
  </ion-header>
 <h1>Contact content</h1>

4. Open the TypeScript file (page-name.page.ts) and customize it according to your needs. You can add properties and methods to your page's class, as well as import any necessary dependencies.

5. Open the HTML template (page-name.page.html) and add your UI components, such as buttons, text inputs, and images.

6. Open the SCSS stylesheet (page-name.page.scss) and add any custom styles you want to apply to your page.

That's it! Your new Ionic page is ready to use. You can navigate to it in your app by adding a route to it in the app-routing.module.ts file.

The ion-router is a component in Ionic 4+ and is used for routing in Ionic applications. Here are the basic steps to use ion-router in an Ionic 4+ application:

1. First, you need to import RouterModule and Routes from @angular/router in your app.module.ts file:

2. Define your routes in a const array. Each route is an object with a path property and a component property:

3. Add RouterModule.forRoot(routes) to the imports array in your @NgModule decorator:

HomePageRoutingModule

home.page.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children: [
      {
        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)
      },
      {
        path: 'posts',
        loadChildren: () => import('../posts/posts.module').then( m => m.PostsPageModule)
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomePageRoutingModule {}

Create list of data

In this example, we define the shape of our object using an interface. The MyObject interface has three properties: title (a string), link (a string), color (a string) icon (a string) and selected (a boolean). We then create an array called myArray that contains three objects of type MyObject.

Note that TypeScript supports both inline and external interfaces, so you can define the interface in the same file or in a separate file if you prefer.

home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  links = [
    {
      title: 'about',
      link: 'about',
      color: 'primary',
      icon: 'bookmarks-outline',
      selected: false
    },
    {
      title: 'contact',
      link: 'contact',
      color: 'danger',
      icon: 'call-outline',
      selected: false
    },
    {
      title: 'profile',
      link: 'profile',
      color: 'success',
      icon: 'person-circle-outline',
      selected: false
    },
    {
      title: 'posts',
      link: 'posts',
      color: 'warning',
      icon: 'home-outline',
      selected: false
    },
  ]

  constructor() { }
  
  // Create this metod to disabled the button when clicked on

  activateButton(i: any) {
    this.links.map((item) => {
      item.selected = false;
    });
    this.links[i].selected = true;
  }
}

1. In your home.page.html file, add the <ion-router-outlet> component where you want your routed components to appear:

2. The ion-router-outlet component acts as a placeholder for the component that matches the current route.

Add <ion-route> elements for each route you defined in your routes array. Each <ion-route> element should have a path attribute and a component attribute that specifies the component to load for that route:

Note that the component attribute should match the name of the component you want to load for that route.

3. Now you can navigate between routes using the ion-router-link component, which generates a link to a route:

hoe.page.ts

<ion-header>
  <ion-toolbar color="tertiary">
    <ion-title><h1>Page home</h1></ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-router-link *ngFor="let p of links; let i = index">
    <ion-button [disabled]="p.selected" (click)="activateButton(i)"
      size="small" color="{{p.color}}" routerLink="/home/{{p.link}}">{{p.title}}
      <ion-icon name="{{p.icon}}" style="margin-left: 8px;"></ion-icon>
    </ion-button>
  </ion-router-link>
  <br><br>
  <router-outlet></router-outlet>
</ion-content>

When a user clicks on one of these links, the ion-router component will navigate to the corresponding route and load the appropriate component into the ion-router-outlet.

That's the basic usage of ion-router in an Ionic 4+ application. There are many other options and features you can use to customize the routing behavior, but these steps should get you started.