lifelong learner — urip iku urup, currently working on accenture.

konfigurasi dan installasi material design pada angular

2
Degananda.com -

Material desain adalah pakem desain yang dibuat oleh google. Material desain sangat populer dikalangna desainer. Kebanyakan aplikasi android saat ini menggunakan material desain sebagai patokan desainnya. Namun juga ada aplikasi yang tidak menggunakan material desain dan memilih menggunakan flat desain. Saat ini material desain(offical from google) telah tersedia untuk versi web namun sejauh ini hanya mensupport framework SPA(Single page application) angular js. Angular diberikan support khusus oleh google untuk material desain ini dikarenakan memang material desain dan angular js merupakan produk buatan dari google sehingga mendapatkan support penuh.

Pada ulasan ini akan dibahas mengenai penggunaan atau installasi material desain untuk framework SPA Angular JS. Versi angular yang digunakan adalah versi 4 dan menggunakan cli versi : 1.0.0 atau sebagaimana tertera dibawah ini :

{
  "name": "material-labs",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
}

Setelah membuat project angular maka kita dapat langsung melakukan beberapa persiapan untuk mengimplementasikan material desain pada project angular kita. Website resmi dari material desain untuk angular adalah :

https://material.angular.io/

1. Installasi angular-material melalui npm

perintah yang digunakan untuk menginstall angular-material pada angular yakni

npm install @angular/material --save

selain itu kita juga harus melakukan install angular animation, ini dikarenakan beberapa komponen membutuhkan modul animasi ini. Sehingga, untuk mudahnya kita juga akan gunakan animasi pada material desain ( + menambah nilai ux )

npm install @angular/animations --save

2. Konfigurasi animasi

mengimport module browserAnimationModule dan menambahkannya pada metadata imports di ngModule.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  BrowserAnimationsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
export class AppModule { }

3. Konfigurasi component modules

kita harus melakukan import satu per satu modul yang digunakan di material desain. Import dilakukan setelah melakukan import terhadap browserModule. Contohnya kita akan menggunakan modul untuk button dan checkbox. Maka pada app.module.ts isinnya menjadi seperti dibawah ini

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// material component
import { MdButtonModule, MdCheckboxModule } from '@angular/material';

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import yang harus dilakukan satu per satu ini menurut kami sangat efektif dan demokratis. Tentunnya kita akan menggunakan seluruh komponen material desain. Mungkin hanya menggunakan layout dan buttonnya (tergantung preferensi). Sehingga, komponen yang tidak dibutuhkna tidak perlu di load kedalam project angular kita (lebih efisien).

4. Import theme css & material -icons

pada index.html tambahkan syntax berikut ini yang berfungsi untuk include css material desain (layaknya mengimport css pada umumnya).

  <link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

untuk material icons gunakan kode dibawah ini

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

5. Import hammer js

terdapat beberapa komponen dari material desain yang membutuhkan support gesture. Olehkarena itu kita juga perlu melakukan install hammer melalui npm. Fungsi hammer adalah mendeteksi gerakan-gerakan gesture user contohnya adalah swipe. Tanpa hammerjs swipe tidak akan dapat dideteksi.

npm install hammerjs --save

lakukan import pada app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'hammerjs';

6. Implementasi komponen material pada view

pada app.module.html kita akan mencoba memasukan komponen button dan checkbox.

  
  <div>
    <button md-button>Flat button</button> 
    <md-checkbox>Check me!</md-checkbox>
  </div>

hasilnya pada browser adalah

maka material desain telah berhasil terinstall dan terkonfigurasi pada project angular kita.