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

pastikan perintah command sudah berada dalam folder project ionic

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

Silahkan berikan komentar dan saran anda

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.