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); } }