Angular Material

Pertama, pada sidenav, kita perlu tambahkan routerlink. Buka file sidenav.component.html, lalu ubah link href. Buka file contactmanager.module.ts, registrasikan route diatas. Kemudian buka file main-content.component.ts, kita handle routing diatas. Kemudian buka file user.service.ts, implementasikan method untuk loadUserById. Kemudian kita buka main-content.component.html, tambahkan code untuk menampilkan data user. Link dokumentasi component yang digunakan: Angular Material Spinner Angular … Read more

Untuk mengasosiasikan nama icon dengan SVG Url digunakan Injectable Service MatIconRegistry. Umumnya kita hanya perlu melakukan register dan load icon satu kali, dapat kita lakukan pada app.module.ts. (pada tutorial akan dilakukan pada contactmanager-app.component.ts). Untuk mencegah XSS vulnerabilities perlu ditandai sebagai trusted resource dengan menggunakan Angular DomSanitizer service. Download file avatars.svg di sini. Kemudian simpan di … Read more

Setelah data berhasil kita retrieve, berikutnya adalah kita akan menampilkan list users pada sidenav. Angular Material component yang akan kita gunakan adalah Navigation List, dokumentasi lengkap lihat di https://material.angular.io/components/list/overview#navigation-lists Buka file sidenav.component.html, lalu ubah code list dari code sebelumnya menggunakan navigation list. Sesuai ekspektasi, sekarang user sudah bisa ditampilkan pada sidenav. Pada modul berikutnya kita … Read more

Pada modul ini kita akan membuat user service untuk handling data users yang akan ditampilkan pada aplikasi. Pada command prompt, jalankan perintah untuk membuat user service. Jangan lupa untuk meregestrasikan service pada module. Buka file contactmanager.module.ts, tambahkan key providers seperti code dibawah. Perhatian, jika Anda akan menggunakan data dari API, janga lupa untuk import HttpClientModule. … Read more