Demo Module Flexbox

Kita akan membuat component yang berisi flexbox pada demo module.

Buka command prompt, lalu buat component baru.

$ ng g c demo\flexbox --skip-tests

Untuk menggunakan flexbox, kita perlu install angular flex layout, pada tutorial digunakan versi @angular/flex-layout@13.0.0-beta.38

$ npm i -s @angular/flex-layout

Kemudian buka file demo-routing.module.ts, tambahkan routing untuk flexbox.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ButtonsComponent } from './buttons.component';
import { FlexboxComponent } from './flexbox/flexbox.component';

const routes: Routes = [
  {path: 'buttons', component: ButtonsComponent},
  {path: 'flexbox', component: FlexboxComponent},
  {path: '**', redirectTo: 'buttons'}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DemoRoutingModule { }

Buka file demo.module.ts, tambahka module flex-laytout.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';


import { DemoRoutingModule } from './demo-routing.module';
import { MaterialModule } from '../shared/material.module';
import { ButtonsComponent } from './buttons.component';
import { FlexboxComponent } from './flexbox/flexbox.component';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [
    ButtonsComponent,
    FlexboxComponent
  ],
  imports: [
    CommonModule,
    DemoRoutingModule,
    FormsModule,
    MaterialModule,
    FlexLayoutModule
  ]
})
export class DemoModule { }

Buka file flexbox.component.html, lalu tambahkan code berikut

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
</div>

Kemudian buka file flexbox.component.scss, lalu tambahkan code berikut

.flex-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

@media all and (max-width: 800px){
    .flex-container{
        justify-content: start;
    }
}

.flex-item{
    width: 200px;
    height: 150px;
    margin-top: 5px;

    background: green;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    line-height: 150px;
}

SIlakan bereksperimen dengan mengubah rule scss diatas, untuk dokumentasi flexbox silakan lihat di https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Jika Anda lebih memilih cara visual dan mencoba-coba, silakan kunjungi https://tburleson-layouts-demos.firebaseapp.com untuk demo Angular Flexbox.

Selain melalui css, Anda juga bisa menggunakan Angular Directive untuk dokumentasi lengkap lihat di https://github.com/angular/flex-layout/blob/master/docs/documentation/Responsive-API.md

tambahkan directive fxLayout.xs=”column” pada file flexbox.component.html, efeknya box akan disusun dalam column ketika browser size lebih kecil dari 600.

Pada modul selanjutnya kita akan mulai membuat aplikasi contact manager.

Silakan bereksperimen dengan component Angular Material dengan membuat component demo.