1

I am trying to get the button when clicked on to go to a second page in the app but I cannot figure out how to do so. (I am new to Ionic but have been stuck on this for hours)

This is the HTML in home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      The God Taco
    </ion-title>
    <ion-buttons end>
      <button (click)="gotoAbout()">
        About
        <ion-icon name="information-circle-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

This is the code in home.page.ts:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { NavController } from '@ionic/angular';
import { AboutPage } from './about.page';

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

gotoAbout() {
  this.navCtrl.push('AboutPage');
}

Also the folders look like this: folder pathway![1] [link]https://i.stack.imgur.com/h6Dzk.jpg

ERROR in src/app/home/home.page.ts(4,27): error TS2307: Cannot find module './about.page'. [ng] src/app/home/home.page.ts(12,1): error TS2304: Cannot find name 'gotoAbout'.

When the recompiling this is the error in the terminal.

doublepancake84
  • 35
  • 5

2 Answers2

1

If you are using Ionic 4 :

You can also redirect it directly in html file :

<ion-button routerLink="/AboutPage"><ion-button>

or another way :

visit this link:

Anjali Sharma
  • 535
  • 6
  • 15
0

If you're using Ionic 4:

constuctor(private router: Router){}

goToAbout(){ 
   this.router.navigate(['/AboutPage']);
}

Where AboutPage should be the name of the page as defined by the path label in your app-routing.module.ts

alex87
  • 419
  • 3
  • 11