Membuat Navigasi Halaman di Ionic 3

halo brow,
postingan kali ini adalah tentang bagaimana menambahakan halaman baru, dan mengarahkan ke halaman baru tersebut

pada contoh kasus ini, saya akan menambahkan sebuah halaman profil pada ionic framwork

perintah untuk membuat sebuah halaman profile

ionic g page Profil

setelah perintah diatas di eksekusi maka akan secara otomatis membuat folder dan file di src/page/profile

edit src\app\app.module.ts
tambahkan list Profil pada import, declaration, dan bootstrap

import { BelajarParse1 } from '../pages/profile/profile';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Profile
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Profile
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

tambahkan button pada home.html untuk menuju ke halaman profil

<ion-content padding>
	<button ion-button (click)="halamanprofile()">Menuju Halaman Profile</button>
</ion-content>

tambahkan import dan script eksekusi pada profile.ts untuk menuju ke halaman profile

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Profil } from '../profile/profile';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }
  halamanprofile(){
    this.navCtrl.push(Profil);
  }
}

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *