Navigation in sidemenu with button

Ionic Framework ionic-v3
1

hello i have make a button in my menu and i cant redirect my button to an other page

my side menu :

image
Capture.JPG372×752 20.9 KB

my app.component.ts:

import { Component,ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { PostbuisnessPage } from '../pages/postbuisness/postbuisness';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any = HomePage;
  PostbuisnessPage: any = PostbuisnessPage;
  constructor(platform: Platform,public navCtrl: NavController) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.show();
    
    });
    launchCatpagePage(){
      this.navCtrl.push(CatpagePage);
    }
  }

}

launchCatpagePage is my page who i want to access but it doesn’t work

2

What does your html look like?

And on a second look throuhg, you have not imported CatpagePage .
Add import {CatpagePage} from 'path/to/file/

3

i have a same error
expected ;

this is my html page

  <ion-header>

  <ion-navbar>
    <ion-title>Poster votre entreprise</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
  <ion-list>

    <ion-item>
      <ion-label floating>Nom de l'entreprise *</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Nom du gerant *</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Ville *</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>N° de Telephone *</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Email *</ion-label>
      <ion-input type="email" required></ion-input>
    </ion-item>

  </ion-list>
      <div padding>
        <button block >Valider</button>
      </div>
</ion-content>

and my error :

image
nav.JPG913×401 51.8 KB

4

I meant the app.html.
You had some misplaced stuff in your code as well.

import { Component,ViewChild } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { PostbuisnessPage } from '../pages/postbuisness/postbuisness';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any = HomePage;
  PostbuisnessPage: any = PostbuisnessPage;
  constructor(platform: Platform,public navCtrl: NavController) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.show();
    
    })}
   launchCatpagePage(){
      this.navCtrl.push(CatpagePage);
    }

}

Now call this.launchCatpagePage() somewhere. Either in app.html or in your component

5 
<ion-nav [root]="rootPage"></ion-nav>
<ion-menu [content]="content" enable-menu-with-back-views="false" >

  <ion-header >
    <ion-toolbar class="toolbar toolbar-wp toolbar-wp-primary" color="primary">
      <ion-title></ion-title>
    </ion-toolbar>
<img src="img/logo-sidemenu.png" class="img-circular">
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
    <a class="callbutton" ion-button round href="tel:+33624673210"> <ion-icon name="call"> Appelez nous</ion-icon></a>
    <button class="postbuisness" ion-button round (click)="launchPostbuisnessPage()">Publier votre entreprise</button>
  </ion-content>

</ion-menu>
<div class="login"></div>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
6

You can not directly import navController in root component so you need to add viewchild decarator like this

@ViewChild(‘content’) navigate;

launchCatpagePage(){
this.navigate.push(CatpagePage);
}

don’t forgot to import @ViewChild from angular/core.

7

it works! thank you so much :slight_smile: