how to ionic 5 navigate forward with object code example

Example 1: ionic route navigation

// just like angular
<button [routerLink]="['/detail']">click</button>

Example 2: router navigate ionic

RouterModule.forRoot([
  { path: '', component: LoginComponent },
  { path: 'detail', component: DetailComponent }
]);

Example 3: passing data from one page to another in ionic 4

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
<ion-card *ngIf="data">
  <ion-card-header>
    <ion-card-title>
      {{ data.name }}
    </ion-card-title>
    <ion-card-subtitle>
        {{ data.website }}
    </ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <ion-item *ngFor="let i of data.interests">
      {{ i }}
    </ion-item>
  </ion-card-content>
</ion-card>
</ion-content>

Example 4: passing data from one page to another in ionic 4

ionic start academyNavigation blank --type=angular
cd academyNavigation
ionic g page details

Tags:

Html Example