Menggunakan Angular Material untuk Mempercantik Tampilan Website Angular

Halo para pembaca yang budiman, pada artikel kali ini saya akan berbagi mengenai Angular Material. Angular Material merupakan salah satu Library komponen UI yang dibuat khusus untuk mempercantik tampilan website Angular. Sama seperti halnya Bootstrap yang bertindak sebagai Framework CSS yang telah berisi ratusan bahkan ribuan Class yang bisa kita pakai untuk memperindah UI dari sebuah website.

Memulai Angular Material

Sebelum memulai menggunakan Angular Material, alangkah baiknya teman-teman sudah melihat dulu dokumentasi resmi dari situs www.material.angular.io

Berikut saya akan menjelaskan langkah demi langkah dalam penggunaan Angular Material.

Langkah pertama tentunya teman-teman telah membuat sebuah project angular. Disini saya akan melanjutkan project dari artikel sebelumnya agar lebih mudah, terstruktur, dan tidak berulang-ulang.

Baiklah, saya asumsikan teman-teman telah mengikuti artikel sebelumnya dan telah membuat sebuah project bernama "Latihan-Angular-Pertama" 

Sebelumnya saya ingin menjelaskan bahwasanya perintah default untuk menginstal paket library Angular Material adalah sebagai berikut :

npm install --save @angular/material @angular/cdk @angular/animations

Namun dengan perintah di atas akan menginstall Angular Material versi tertinggi. Sementara, Angular Material akan berjalan dengan baik jika kita menginstal dengan versi yang sama dengan dependensi Angular kita atau juga bisa dengan versi dibawah dari dependensi Angular kita.

Untuk melihat versi dari dependensi Angular kita, silahkan teman-teman buka file package.json. Seperti gambar berikut :

Bisa kita lihat bahwa dependensi Angular pada Project saya ini merupakan versi 7.2.0
Maka untuk mengatasi terjadi error di kemudian hari kita harus menginstal paket Angular Material dengan versi yang sama dengan dependensi Angular kita, atau juga bisa dengan versi yang berada di bawah dependensi Angular kita.

Berikut perintah untuk menginstal paket Angular Material dengan versi 7.2.0 :

npm install --save @angular/material@7.2.0 @angular/cdk@7.2.0 @angular/animations@7.2.0

Silahkan tunggu prosesnya sampai selesai, proses ini menggunakan koneksi internet. Sehingga lama atau tidak nya proses ini tergantung dari koneksi internet yang teman-teman gunakan.

Membuat Material Module

Proses selanjutnya adalah membuat sebuah Module khusus untuk Angular Material. Module Angular Material yang akan kita butuhkan nantinya harus kita import dulu baru setelah itu kita bisa memakainya.

Buka Command Prompt dan ketikkan perintah berikut untuk membuat Module :

ng g m material --flat --module

Dengan perintah di atas kita akan menghasilkan sebuah file dengan nama material.module.ts yang berada sejajar dengan file app.component.ts

Buka file Module yang baru kita buat tersebut dan ketikkan koding seperti berikut :

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

//Disini kita mengimport MatButton yang akan di pakai untuk membuat Button//
const ExportMatModule = [   
  MatButtonModule
]

@NgModule({
  declarations: [],
  imports: [...ExportMatModule],
  exports: [...ExportMatModule]
})
export class MaterialModule { }

Seperti yang kita lihat diatas, kita telah mengimport salah satu komponent yang kita butuhkan yaitu MatButtonModule dimana ini akan berfungsi untuk mempercantik tampilan dari Button yang kita buat pada project.

Mengimport Tema Angular Material

Selanjutnya kita perlu mengimport tema yang telah disediakan oleh Angular Material, ada beberapa tema yang disediakan yaitu :

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Nah untuk mencontohkan, kita akan menggunakan tema yang deeppurple-amber.css

Cara untuk mengimportnya silahkan buka file style.css yang ada diluar folder app, kemudian tambahkan koding berikut :

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Import ke dalam App Module

Langkah selanjutnya silahkan teman-teman import semua Module yang telah kita buat tadi ke dalam App Module agar nantinya di baca oleh semua komponen yang ada pada project kita. Caranya buka file app.module.ts kemudian import BrowserAnimation dan Material seperti berikut :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

Kemudian pada bagian @NgModule import juga seperti berikut :

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MaterialModule
 ],

Terapkan ke Masing-masing Komponen

Proses terakhir yang kita lakukan adalah menerapkan style tersebut untuk mempercantik tampilan website kita. Sebagai contoh silahkan buka file app.component.html, kemudian tambahkan library mat-button ke masing-masing button yang telah kita buat pada artikel sebelumnya.

<button mat-button routerLink="/">Dashboard</button>
<button mat-button routerLink="/add">Add Product</button>
<button mat-button routerLink="/list">List Product</button>
<hr>
<router-outlet></router-outlet>

Kemudian coba jalankan project kita dengan perintah berikut pada Command Prompt :

ng serve

Berikut hasil sebelum kita menggunakan mat-button :

Berikut hasil setelah kita gunakan mat-button :

Silahkan lihat hasilnya ketika button tersebut di klik, akan terdapat animasi yang cantik.

Sekarang coba teman-teman rubah dari mat-button menjadi mat-raised-button. Maka tampilannya akan lebih cantik lagi seperti berikut :

Angular Material menyediakan tiga class warna default yaitu primary, accent, dan warn

Silahkan teman-teman berkreasi sendiri dengan menambahkan koding color="primary" pada button tersebut. Berikut hasil akhirya :

Cukup sekian dulu artikel kali ini, semoga bermanfaat ya, jangan lupa tinggalkan jejak di kolom komentar. Terimakasih.