Berpindah Halaman dengan Ionic 3 dan Angular4

Ok,

Pada kesempatan kali in, kita akan melanjutkan Membuat Mobile Application dengan Ionic 3 dan Angular4 yang telah kita mulai pada artikel sebelumnya. Yang belum baca artikel sebelumnya bisa melihatnya disini.

Jika kamu mencari tutorial ini, saya anggap kamu sudah bisa membuat project baru dengan menggunakan Ionic 3, jika belum silahkan baca artikel saya sebelumnya.

Pada tutorial ini kita akan berpindah dari halaman awal (Home) ke halaman Profile dengan menggunakan Button (tombol) yang ada di halaman home dan melink ke halaman profile.

Jika kamu memulai project Ionic 3 dari awal dengan template blank, maka langkah pertamanya, kamu membuat halaman baru dengan nama profile, untuk membuat halaman baru, Ionic CLI telah menyapkan short cut nya.

Pada command prompt, jalankan perintah berikut

penjelasannya, kita menggunakan perintag generate (g) dengan tipe page dan nama halamannya profile.

maka kamu akan mempunya satu halaman baru, halaman profile yang ada di bawah folder src/pages.

Selanjutnya kita buat button pada halamana home (home.html) dan menambahkan atribute click. berikut contohnya

atribute tag (click) di beri value dengan nama fungsi pindah(), hal ini memberi tahu aplikasi, jika tombol klik ditekan, silahkan jalankan perintah pindah().

Selanjutnya, kita buat fungsi pindah() pada home.ts, berikut code nya

pada fungsi pidah(), kita menggunakan navigation controller (navCtrl) dengan tipe push() dan kita isi dengan halaman nama class dari halaman profile (profile.ts) yang baru kita bikin.

Silahkan jalankan aplikasi Anda dengan menjalankan perintah

Selamat mencoba,