Halaman web yang dihasilkan juga bersifat browser portability, device independence, dan graceful degradation. Angular Material membantu programmer untuk membuat responsive web dengan cepat dan indah. Angular Material mengambil inspirasi dari rancangan antarmuka Google Material.
Menginstall Angular Material
Langkah untuk menginstall Angular Material adalah sebagai berikut:
- Buka folder proyek Angular yang sudah dibuat sebelumnya pada terminal (atau folder proyek Angular yang ingin menggunakan tampilan Angular Material.
- Jalankan command ng add @angular/material
- Command di atas akan melakukan instalasi Angular Material dan juga akan memberi beberapa pertanyaan terkait fitur-fitur yang akan digunakan.
- Pertanyaan pertama terkait theme yang akan digunakan.
- Meminta persetujuan untuk mengaktifkan typografi global Angular Material.
- Melakukan konfigurasi animasi browser untuk Angular Material.
- Selanjutnya, proses intalasi dilakukan sesuai konfigurasi yang sudah diberikan oleh user.
- Untuk menguji apakah Angular Material telah terinstall, tambahkan module Angular Material pada code proyek. Langkah-langkah nya adalah sebagai berikut:
- Buka file app.module.ts yang terdapat di dalam folder: folder_proyek/src/app/app.module.ts
- Lalu tambahkan baris kode berikut:
- Buka file app.component.html yang terdapat di dalam folder: folder_proyek/src/app/app.component.html
- Lalu tambahkan baris kode berikut pada posisi yang sesuai (dalam contoh diletakkan di atas elemen text Resources:
- Setelah itu jalankan command ng serve pada folder proyek.
- Setelah local server berhasil di jalankan, buka url http://localhost:4200 pada browser.
- Bila berhasil, tampilan Angular akan terdapat komponen tambahan yaitu elemen slider seperti yang ditunjukkan pada gambar berikut:
Latihan Angular Material
- Berikut adalah Latihan untuk menambahkan design Material pada aplikasi Angular.
- Buat sebuah proyek baru dengan perintah ng new angMaterial dan jawab pertanyaan yang muncul seperti pada gambar berikut.
- Selanjutnya masuk ke folder proyek angMaterial yang telah dibuat.
- Di dalam folder proyek angMaterial, masukkan instruksi berikut: npm install –save @angular/material @angular/cdk @angular/core @angular/common
- Perintah di atas akan menginstall design material beserta library angular yang lain.
- Jika sukses, di dalam folder node_modules/@angular pada folder proyek akan terlihat folder material seperti pada gambar.
- Beberapa komponen Material memiliki dependency terhadap library yang lain seperti Angular Animation dan hammerjs. Gunakan instruksi berikut untuk menambahkan kedua library yang dibutuhkan.
- npm install --save @angular/animations
- npm install --save hammerjs
- Setelah sukses, buka file angular.json pada folder proyek dan tambahkan baris seperti pada gambar berikut.
- Untuk menggunakan Angular Material, terdapat beberapa pre-built themes yang bisa digunakan. Pre-built themes yang tersedia adalah 1. indigo-pink; 2. deeppurple-amber; 3. purple-green; 4. pink-bluegrey.
- Untuk menggunakan pre-built themes, tambahkan baris berikut di global style.css yang ada di dalam folder src.
- @import '~@angular/material/prebuilt-themes/indigo-pink.css’;
- Untuk menggunakan icon Material, tambahkan baris berikut pada index.html di dalam folder src.
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- Selanjutnya buat module material dengan instruksi angular-cli berikut.
- ng generate module material
- Komponen material UI yang akan digunakan pada Latihan ini adalah:
- MatButtonModule
- MatToolbarModule
- MatIconModule
- MatCardModule
- Setelah module material berhasil di buat, ubah file material.module.ts yang ada di dalam folder src/app/material seperti pada gambar di samping.
- Kemudian ubah file app.module.ts pada folder src/app menjadi seperti pada gambar berikut.
- Langkah berikutnya adalah ubah file app.component.html pada folder src/app dengan kode seperti pada gambar berikut.
- Selanjutnya jalankan instruksi ng serve dan lihat hasilnya pada browser dengan mengakses url http://localhost:4200.
- Pada browser, akan menampilkan Material UI seperti pada gambar berikut:
