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

Mengenal angular-flex : installasi dan responsive layout

0
Degananda.com -

Selayang pandang

Angular-flex adalah framework yang ditulis dengan typescript dan css untuk membuat layout yang responsive pada aplikasi yang menggunakan angular. Jika kita menggunakan angular material desain tentu kita akan menyadari bahwa seluruh komponen yang ada pada material desain tidak support responsive dan media query. Oleh karena itu , angular-flex ini dapat digunakan secara bersamaan dengan angular material desain untuk dapat membuat aplikasi yang responsive. Hal itu berbeda ketika kita menggunakan angular materialize (materializecss khusus untuk angular) yang sudah mencakup fitur responsive pada layoutnya. Angular memang memisah antara material desain dan layout responsive(flex).

Angular Flex saat tulisan ini dipublish masih mencapai versi  (2.0.0 beta). Angular flex dibuat dengan mengguanakan media query dan konsep flexbox css. Secara singkat , jika kita menggunakan property display : flex pada css kita dapat membuat dua buah komponen memiliki ukuran yang sama. Konsep inilah yang menjadi dasar dari angular flex yang kemudian dikombinasikan dengan media query untuk dapat mencapai fungsi responsive.

Kami juga memiliki ulasan tentang angular material desain silahkan cek link dibawah ini untuk memahami penggunaan angular material desain.

https://degananda.com/2017/06/08/konfigurasi-dan-installasi-material-design-pada-angular/

Integrasi dengan angular-cli 4.0+

Kabar baiknya yang sangat menggembirakan hati adalah angular-flex ini terintegrasi dengan angular-cli versi 4 keatas. Meski kita harus menginstall angular flex dengan npm namun kita tidak perlu mengkonfigurasi webpack atau system js. Karena secara otomatis akan terkonfigurasi dengan angular-cli. Sangat memudahkan bagi kita sebagai developer. Kita hanya perlu fokus untuk melakukan coding dan angular-cli yang akan menghandle proses konfigurasi package. Pada ulasan ini , kami menggunakan angular cli versi 4.

Installasi

Angular-flex dapat di install dengan menggunakan node package manager(npm) pada folder angular anda.

npm install @angular/flex-layout@latest --save

done, angular/flex telah terinstall dan terintegrasi dengan angular cli (versi 4+). Setelah terinstall flex-layout belum dapat digunakan hingga kita mengkonfigurasi app.module.ts lakukan import terhadap FlexLayoutModule dari package @angular/flex-layout dan masukan pada metadata import di @ngModule() seperti pada kode dibawah ini

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

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

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

done , maka angular flex yang sedang tahap beta(pada saat tulisan ini dibuat) siap digunakan pada project angular kita.

How to use ?

Langsung pada topik inti dari tulisan ini yakni cara penggunaan angular/flex-layout ini. Namun sebelum kita memulainya, kita harus mengetahui bahwa angular/flex-layout ini berbeda dengan framework layout css lainnya. Angular-flex layout ditulis dengan menggunakan typescript. Saat ini angular-flex layout masih dalam tahapan beta dan hanya dapat digunakan untuk project yang menggunakan angular versi 4.1+.

Goal

Tujuan ahir yang diharapkan dicapai oleh pembaca dan penulis dari tutorial ini adalah dapat membuat layout sederhana (3 column ataupun n-column) secara responsive dalam artian ketika layout tersebut dibuka pada mobile akan menyesuaikan dengan ukuran layar. Kita tidak menggunakan angular-material design melainkan hanya menggunakan angular/flex-layout saja. Untuk kombinasi angular-flex dan angular-material design akan dibahas pada tulisan selanjutnya.

3 column reponsive layout

layout yang akan dibuat kurang lebih akan memiliki tampilan seperti dibawah ini :

konsep umum yang perlu difahami saat membuat layout responsive dengan menggunakan angular-flex

  1. rule untuk menentukan size pada viewport / ukuran layar dituliskan dalam bentuk directive. Jika pada angular materialize dituliskan dalam bentuk
  2. daftar ukuran yang perlu diketahui adalah
    ukuran deskripsi
    xs phone / hp
    sm tablet
    md desktop
    lg larger-desktop

    Sebenarnya istilah diatas sangat familiar dengan istilah yang digunakan untuk mendefinisikan size pada framework bootstrap (jika anda pernah menggunakannya). Untuk ukuran spesifiknya kami kurang mendapatkan informasi namun cukup gunakan pakem diatas karena spesifik ukuran(pixel) telah didefinisikan oleh angular/layout-flex berdasarkan best practice.

  3. nilai “column” pada directive berarti dia akan menjadi satu buah container / div yang melintang sesuai dengan ukuran layar(horizontal).

untuk saat ini hanya tiga konsep tersebut yang dapat kami jabarkan mengingat angular-flex ini memiliki dokumentasi yang sangat minim sekali mungkin dikarenakan masih memasuki tahap beta.

Langsung saja kode yang digunakan untuk membuat layout diatas

<div fxLayout="row" fxLayout.xs="column" fxFlex>
  <div fxFlex style="background: red; color: white; padding: 30px;"> 
    Kolom 1  
  </div>
  <div fxFlex style="background: green; color: white; padding: 30px;"> 
    Kolom 2
  </div>
  <div fxFlex style="background:blue; color: white; padding: 30px;"> 
    Kolom 3
  </div>
</div>

kita akan membahas satu-satu line by line mengenai kode diatas.

  1. fxLayout=”row” , directive ini berguna untuk menandakan bahwa syntax tersebut adalah flexlayout berjenis row. Menggapa menggunakan row? karena kita akan membuat layout responsive dengan 3 kolom.
  2. fxLayout.xs , directive yang memerintahkan angular-flex pada saat size screen menjadi ukuran phone/handphone. value “column” berarti pada saat size screen seukuran dengan phone/hp maka layout akan menjadi column (full melintang secara horizontal).
  3. fxFlex directive yang menunjukan bahwa elemen ini merupakan angular-flex
  4. fxFlex pada div, div menjadi display : flex / menandakan elemen merupakan angular-flex.

sekarang kita akan coba meresize menjadi seukuran hp maka pada browser yang akan ditampilkan adalah :

pada saat seukuran phone maka fxLayout akan menjadi column bukan lagi row. Sekarang kita akan coba hilangkan fxLayout.xs maka ketika kita resize menjadi ukuran phone/hp akan menampilkan seperti gambar dibawah ini.

ketika directive fxLayout.xs=”column” di hilangkan maka tampilan tidak lagi responsive karena flexlayout akan tetap menjadi “row”. Sehingga kunci dari angular flex responsive ini adalah penggunaan directive fxLayout.xs , fxLayout.md, fxLayout.sm ataupun fxLayout.lg (deskripsi dapat melihat pada tabel diatas).

custom n-column

Ingin membuat 3 baris dengan spesifikasi :

  1. baris 1 memiliki 4 kolom
  2. baris 2 memiliki 2 kolom
  3. baris 3 memiliki 3 kolom
  4. setiap kolom pada satu baris memiliki ukuran yang sama , namun jika anda menginginkan kolom dengan fixed width tidak dibahas dalam tutorial ini mungkin pada next tutorial ya 😀

kode yang digunakan adalah

<!-- baris 1 -->
<div class="container" style="display: inline-block">
  <div fxLayout="row" fxFlex fxLayout.xs="column">
    <div fxFlex style="background: red; color: white; padding: 30px;"> 
      Kolom 1  
    </div>
    <div fxFlex style="background: green; color: white; padding: 30px;"> 
      Kolom 2
    </div>
    <div fxFlex style="background:blue; color: white; padding: 30px;"> 
      Kolom 3
    </div>
    <div fxFlex style="background:yellow; color: white; padding: 30px;"> 
      Kolom 4
    </div>
  </div>
</div>

<!-- baris 2 -->
<div class="container" style="display: inline-block">
  <div fxLayout="row" fxFlex fxLayout.xs="column">
    <div fxFlex style="background: red; color: white; padding: 30px;"> 
      Kolom 1  
    </div>
    <div fxFlex style="background: green; color: white; padding: 30px;"> 
      Kolom 2
    </div>
  </div>
</div>

<!-- baris 3 -->
<div class="container" style="display: inline-block">
  <div fxLayout="row" fxFlex fxLayout.xs="column">
    <div fxFlex style="background: red; color: white; padding: 30px;"> 
      Kolom 1  
    </div>
    <div fxFlex style="background: green; color: white; padding: 30px;"> 
      Kolom 2
    </div>
    <div fxFlex style="background:blue; color: white; padding: 30px;"> 
      Kolom 3
    </div>
  </div>
</div>

hasilnya pada browser adalah (ukuran desktop)

pada saat kita resize ke ukuran xs / phone /hp hasilnya menjadi

done~ itulah cara penggunaan fitur responsive pada angular flex. Semoga dapat memberikan manfaat khususnya bagi penulis dan pembaca blog ini.