Angular Material

KIta akan menambahkan Angular Material Component pada Sidenav, yaitu Toolbar dan List. Untuk dokumentasi lengkap kunjungi link berikut: Angular Material Toolbar Component Angular Material List Component Buka file sidenav.component.html, lalu tambahkan code toolbar dan list: Sampai disini sidenav sudah makin terlihat bentuknya.

Untuk dokumentasi lengkap, lihat di https://material.angular.io/components/sidenav/overview Buka file sidenav.component.html, lalu gunakan code dibawah. Buka file sidenav.component.scss, lalu tambahkan css code berikut Jika kita test, aplikasi kurang lebih sudah mulai terbentuk. Pada modul selanjutnya kita akan mulai membuat content untuk masing-masing component.

Aplikasi yang akan kita buat memiliki layout seperti berikut Mari kita buat module dan component untuk aplikasi diatas. Buka command prompt dan jalankan perintah berikut contactmanager-app akan berfungsi sebagai container, yang akan berisi component toolbar, sidenav dan main-content. Buka file app.module.ts, tambahkan routing untuk contactmanager dan ubah default redirect ke contactmanager. Buka file contactmanager.module.ts, tambahkan … Read more

Kita akan membuat component yang berisi flexbox pada demo module. Buka command prompt, lalu buat component baru. Untuk menggunakan flexbox, kita perlu install angular flex layout, pada tutorial digunakan versi @angular/flex-layout@13.0.0-beta.38 Kemudian buka file demo-routing.module.ts, tambahkan routing untuk flexbox. Buka file demo.module.ts, tambahka module flex-laytout. Buka file flexbox.component.html, lalu tambahkan code berikut Kemudian buka file … Read more