Menggunakan Fitur Router Link pada Angular

Baiklah teman-teman para pembaca, untuk melanjutkan artikel sebelumnya, kali ini kita akan membahas bagaimana cara menggunakan fitur Routing yang ada pada Angular. Buat teman-teman yang baru bergabung silahkan baca artikel sebelumnya di bawah ini :

• Berkenalan Dengan Angular CLI
• Berpindah Halaman Tanpa Reload di Angular

Langkah pertama yang perlu kita buat adalah file statis yang tidak berubah-ubah ketika kita berpindah halaman.

Buka file app.component.html, tambahkan koding berikut :

<button routerLink="/">Dashboard</button>
<button routerLink="/add">Add Product</button>
<button routerLink="/list">List Product</button>
<hr>
<router-outlet></router-outlet>

Koding diatas akan menghasilkan tiga buah tombol yang akan menjadi akses kita ke setiap component yang tersedia. Tombol tersebut telah di lengkapi pemanggil routerLink. Kalau di halaman HTML biasa routerLink memiliki fungsi yang sama dengan href.

Tampilan Dashboard

Buka file dashboard.component.html, dan tambahkan koding berikut :

<h2>Selamat Datang Di Kodemin</h2>

Nanti teman-teman bisa mengkreasikan sendiri tampilan yang teman-teman inginkan. Teman-teman bisa menggunaka Bootstrap sebagai style Framework yang dapat membantu mengembangkan tampilan, ataupun bisa juga dengan menggunakan Angular Material yang dokumentasinya dapat teman-teman temukan di : material.angular.io

Tampilan Product List

Buka file product-list.component.html, dan tambahkan koding berikut :

<h2>Halaman Product List</h2>
<table border="1" width="50%">
    <tr>
        <td>No.</td>
        <td>Nama Product</td>
        <td>Harga</td>
    </tr>
</table>

Tampilan Add Product

Buka file add-product.component.html, dan tambahkan koding berikut :

<h2>Halaman Tambah Product</h2>
<form action="">
    <input type="text" name="" placeholder="Nama Product">
    <br><br>
    <input type="text" name="" placeholder="Harga">
    <br><br>
    <button type="submit">Simpan</button>
    &nbsp;
    <button type="reset">Batal</button>
</form>

Jalankan

Sekarang silahkan jalankan dengan perintah berikut pada Command Prompt

ng serve

Kemudian buka browser kesayangan teman-teman dan akses halaman http://localhost:4200/
Maka tampilannya kurang lebih akan seperti berikut :

Untuk berpindah halaman teman-teman silahkan klik tiga tombol yang tersedia, maka secara otomatis teman-teman akan berpindah ke halaman yang di minta tanpa melakukan reload sedikit pun.

Sekian dulu artikel kali ini, semoga bermanfaat, jangan lupa share dan tinggalkan jejak di kolom komentar. Terimakasih.