Angular Material

Pada modul ini kita akan menggunakan theme. Menu toggle akan disimpan pada toolbar, namun proses perubahan theme perlu dilakukan pada parent component, dalam hal ini adalah sidenav component. Jadi pada toolbar component perlu dilakukan event emiter. Buka file toolbar.component.html, tambahkan menu untuk toggle theme. Kemudian buka file toolbar.component.ts, tambahkan code untuk handling toggleTheme. Kemudian buka … Read more

Kita akan menggunakan Component Dialog yang berisi form untuk menambahkan contact. Dokumentasi Angular Material Dialog Dokumentasi Angular Material Form Dokumentasi Angular Material Select Pertama kita buka file toolbar.component.html, lalu tambahkan click listener. Karena dialog yang akan kita buat cukup besar, oleh karena itu kita buat component baru. Kemudian buka file toolbar.component.ts, tambahkan code untuk menampilkan … Read more

Pada modul ini kita akan menambahkan menu pada toolbar. Dokumentasi dapat dilihat di: Angular Material Toolbar Angular Material Menu Buka file toolbar.component.cs, lalu tambahkan css rule berikut Buka file toolbar.component.html, lalu tambahkan button pada toolbar untuk menampilkan menu. Sesuai ekspektasi, menu untuk add new contact berhasil ditambahkan. Pada modul berikutnya kita akan menambahkan code untuk … Read more

Dokumentasi Table Soring : https://material.angular.io/components/table/overview#sorting Seperti yang dijelaskan dalam dokumentasi, kita perlu menambahkan matSort directive pada table dan menambahkan add mat-sort-header pada setiap column header cell. Kita juga perlu meng-import MatSortModule untuk menggunakan matSort directive. Pertama kita buka file notes.component.html, tambahkan matSort directing dan mat-sort-header. Kemudian kita buka file notes.component.ts, kemudian implementasikan method sorting. Jika … Read more