Angular Material

Kita akan menambahkan card kedalam main-content.component.html. Dokumentasi card dapat dilihat di https://material.angular.io/components/card/overview Buka file main-content.component.html, lalu gunakan basic card dari dokumentasi diatas. Kemudian kita atur margin untuk seluruh component dalam main-content. Pada tutorial digunakan penambahan css rule pada sidenav, bila Anda ingin menggunakan pendekatan lain, silakan bereksperimen. Buka file sidenav.component.html, tambahkan div wrapper untuk <router-outlet>. … Read more

Mari kita pindahkan button toggle dari sidenav ke toolbar.component.html. Buka file sidenav.component.html, pindahkan code toggle kedalam <app-toolbar> Buka file toolbar.component.html, tambahkan button untuk melakukan toggle sidenav Buka file toolbar.component.ts, tambahkan code untuk handling click event. Buka file toolbar.component.css, lalu tambahkan rule untuk mengatur button ditampilkan pada screen kecil. Sampai disini layout aplikasi sudah mulai berbentuk. … Read more

Untuk dokumentasi Sidenav Properties dan API, silakan buka di: https://material.angular.io/components/sidenav/api Pada modul ini akan digunakan Properties opened, berguna untuk mengatur default sidenav ketika diload, apakah dalam posisi terbuka atau tertutup. Untuk mempercantik tampilan, kita bisa tambahkan shadow pada sidenav dengan menggunakan class mat-elevation-z10. Buka file sidenav.component.html, lalu tambahkan property opened=”true” dan class mat-elevation-z10. Sampai disini … Read more

Buka file toolbar.component.html, lalu tambahkan Angular Material toolbar component. Lalu ubah css rule dari class app-sidenav-content pada file sidenav.component.scss Sampai disini layout aplikasi sudah mulai terbentuk lebih jelas. Pada modul selanjutnya kita akan mulai melakukan customizing sidenav lebih mendalam.