Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Cara Menggunakan Material Design di Angular 6

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Angular telah berkembang sepanjangang tahun dan fitur baru yang menarik terus ditambahkan ke tiap versi terbarunya. Salah satu pengembangannya adalah Material Design, yangf datang dengan kompononen baru. Panduan ini akan membahas Angular Material dan cara menginkorporasikan-nya dalam proyek Angular 6.

Apa itu Material Design?

Material Design adalah sebuah bahasa desain untuk web dan aplikasi ponsel yang dikembangkan Google pada tahun 2014. Material Design membuat pengembang dapat lebih mudah mengostumisasi antarmuka mereka sambil tetap bisa menjaga antarmuka aplikasi menarik yang nyaman bagi pengguna. Dengan Material Design, kamu mendapatkan sebuah format yang tertata baik dengan fleksibilitas untuk mengekspresikan brand dan gaya-mu.

Sebagai contoh dari Material Design, cek Houzz, sebuah rumah desain aplikasi yang memenangkan penghargaan Google Play pada tahun 2016. Aplikasi ini menggunakan Material Design untuk menyesuaikan banyak fiturnya dalam keadaan perangkat ponsel yang terbatas. Ini menyediakan sebuah pengalaman yang baik untuk pengguna dengan mengijinkan mereka melihat dan menavigasikan aplikasi tanpa merasa kewalahan. Ini benar-benar salah satu aplikasi Material Design terbaik.

Kiriman ini bukan mengenai Material Design, jadi kita tidak akan membahas detilnya. Jika kamu ingin belajar lebih banyak, ada sebuah panduan mengenai Material Design yang bagus di Envato blog.

Pengenalan ke Angular Material

Angular Material terdiri dari sebuah rangkaian komponen Angular setengah jadi. Tidak seperti Bootstrap yang memberikanmu komponen yang bisa kamu atur sesuai yang kamu inginkan, Angular Material berusaha untuk menyediakan sebuah antarmuka yang konsisten yang tertingkatkan. Pada saat yang sama, dia memberikanmu kemampuan untuk mengontrol seberapa berbeda komponen-komponennya bekerja.

Sama seperti Angular, Angular Material telah berkembang banyak semenjak rilis pertamanya, dengan peningkatan dan perbaikan yang besar.

Cara Menambah Angular Material ke Proyekmu

Dalam rangka menambahkan Angular Material ke sebuah proyek, kita akan menggunakan perintah ng add yang digunakan untuk menambahkan kemampuan baru ke proyek Angular. Perintah ini adalah fitur baru di Angular 6, dan sesederhana:

Perintah ini akan menambahkan pustaka-nya ke proyek yang telah ada dan membawa tema CSS dalam angular.json. Dia juga akan menambah skrip di index.html dan memperhabarui AppModule.

Fitur lain di Angular 6 adalah ng update, yang memperbaharui npm dependencies ketika sebuah versi baru dirilis. Dia juga memperbaharui code RxJS dan Material Design untuk mendapatkan keuntungan dai API yang baru.

Dependencies dan Components

Angular material terdiri dari beberapa desain components yang termasuk dalam kategori berikut:

  • Form controls
  • Tombol dan inidkator
  • Tataletak dan Navigasi
  • Popups dan modals
  • Tabel data

Kamu bisa membuat komponen awal menggunakan perintah ng update. Beberapa scematics yang tersedia melalui perintah ini adalah:

  • Navigasi
  • Dasbor
  • Tabel

Schematics tersebut dapat dengan mudah dipasang dengan perintah ng generate seperti berikut:

  • ng generate @angular/material:material-table --name : membuat sebuah komponen yang menampilkan data dengan tabel.
  • ng generate @angular/material:material-nav --name : membuat sebuah komponen dengan navigasi samping dan toolbar
  • ng generate @angular/material:material-dashboard --name : membuat sebuah komponen yang berisi daftar grid dinamis dari kartu-kartu.

Membuat Sebuah Aplikasi Material Angular 6

Untuk memulai, kamu akan membutuhkan Angular CLI. Jika kamu tidak memiliki CLI terpasang, cukup pasang dengan menggunakan perintah berikut:

Selanjutnya, kita harus menginisialisasi sebuah proyek Angular baru. Untuk melakukannya, keluarkan perintah berikut, di mana Material-ng adalah nama dari proyek Angular kita.

Perintah ini akan membuat beberapa berkas template Angular untuk proyekmu dan memasang paket awal dependencies yang dibutuhkan.

Pergi ke direktori dari proyekmu dan tambahkan Angular Material ke proyekmu.

Selanjutnya, kita akan menambah beberapa komponen yang biasa bagi banyak aplikasi seperti navigasi.

Menambah sebuah Bar Navigasi

Untuk menambahkan sebuab bar navigasi, cukup menggunakan:

Perintah ini menambahkan navigasi samping yang bisa dihilangkan dan lemari komponen. Kamu harus mendapatkan keluaran berikut yang memiliki empat berkas tergenerasi untuk kita, yaitu my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, dan my-nav.component.ts. 

Sekarang buka my-nav.component.html dan kamu harusnya melihat semua kode HTML dari navigasi yang dibuatkan untuk ita.

Secara default, paket awal proyek Angular akan berfungsi sebagai halaman default, tapi kita ingin bisa melihat sihir dari Material Design! Untuk menggunakan komponen Material Design yang telah digenerasi, buka app.component.html dan ganti semua kode dengan:

Sekarang, saat kamu menjalankan aplikasinya, kamu akan melihat bar navigasi.

Kamu juga harus menyadari bahwa komponen navigasi yang kita tambahkan telah diimpor ke module utama seperti berikut:

Dalam my-nav.component.html, mari buat beberapa perubahan ke daftar menu-nya juga:

Sekarang, kamu bisa bisa mulai pengembangan server dengan menjalankan:

Hasilnya harusnya seperti:

Material Design Angular app layout

Seperti yang bisa kamu lihat, Angular Material menyediakan cara mudah untuk membuat dan menjalankan aplikasimu. Hanya dengan beberapa perintah dan beberapa baris kode, kita telah bisa menginkorporasikan Material Design ke aplikasi Angular kita!

Kunjungi GitHub repo kita untuk sumber kode lengkap dari contoh aplikasi ini.

Kesimpulan

Saya harap panduan ini telah membantumu memahami cara menggunakan kemampuan dari Material Design pada aplikasimu untuk antarmuka kelas atas. Untuk informasi lebih lanjut mengenai Material Design di Angular 6, cek dokumentasi resmi yang berisikan template siap pakai. Ini adalah tempat yang bagus untuk belajar Angular. Kamu juga bisa mengecek panduan Angular dan kursus-kusus di sini, Envato Tuts+!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.