How to build Menu with Angular7 and Material Design7

เรามาลองสร้างเมนูให้กับเว็บไซต์ของเรากันด้วย angular7

Requirement

• อยากได้เมนูที่อยู่ทางด้านซ้ายของเว็บไซต์
• ใช้ angular version 7
• ใช้ angular material design version 7

Step 1

สร้าง project ของเราขึ้นมาในตัวอย่างจะใช้ชื่อ “ng7-menu-sidenav”

ใน angular version 7 นี้ cli จะมีความฉลาดมากขึ้น สังเกตว่าเวลาเราสร้างโปรเจคใหม่ขึ้นมานั้น มันจะถามเป็น step จากตัวอย่าง ถามว่าสร้าง angular routing ให้ด้วยเลยหรือไม่ step ต่อไปก็ถามต่อว่าอยากให้โปรเจคของเราใช้ style sheet เป็นแบบไหน ในที่นี้ผมเลือเป็น SCSS

Step 2

เปิดโปรเจคขึ้นมา จะเห็นโครงสร้างหน้าตาประมาณนี้

ทำการ start project ขึ้นมาเลย ถ้าใครลืมคำสั่งหรือเพิ่งเคยใช้ก็ให้เข้าไปที่ project แล้วพิมพ์ command “ng serve”

ผลลัพธ์ที่ได้ โปรเจคของเราสามารถเรียกใช้งานผ่าน browser ได้แล้ว

Step 3

ทำการติดตั้ง dependency material design ใน angular ด้วยคำสั่ง
npm install --save @angular/material @angular/cdk @angular/animations

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

ทำการ import css ของ material ไว้ในไฟล์ style.scss

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ทำการ import module BrowserAnimationsModule ไว้ใน app.module

https://fonts.googleapis.com/icon?family=Material+Icons

ทำการ import style sheet material icon ไว้ที่ไฟล์ index

Step 4

ทำการติดตั้ง menu side nav ด้วยคำสั่ง
ng generate @angular/material:material-nav side-nav

จะเห็นว่ามี component ใหม่โผล่ขึ้นมา

และในไฟล์ app.module ก็ถูก add module ที่เกี่ยวข้องกับ menu side nav ของ material อัตโนมัติ ตามตัวอย่างด้านล่าง

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { SideNavComponent } from './side-nav/side-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule,
MatIconModule, MatListModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
SideNavComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 5

ลองเปลี่ยนรัน menu side nav ว่าหน้าตาเป็นอย่างไร วิธีง่ายที่สุดให้ลบโค้ดทุกอย่างในไฟล์ app.component.html และแก้ไขเป็นแบบตัวอย่างด้านล่างนี้แทน

<app-side-nav></app-side-nav>

ผลลัพธ์ที่ได้ จะเห็นว่ามี menu ขึ้นมาแล้ว แต่ยังดูขี้เหร่มาก

Final Step

Custom Style Sheet

1. ไฟล์ side-nav.component.html แก้ไข <mat-toolbar>Menu</mat-toolbar> เป็น <mat-toolbar color="primary">Menu</mat-toolbar>
2. ไฟล์ side-nav.component.scss แก้ไข 
.sidenav .mat-toolbar {
  background: inherit;
}
เป็น
.sidenav .mat-toolbar {
  background: #3f51b5;
}

Code file side-nav.component.html

<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>ng7-menu-sidenav</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>

Code file side-nav.component.scss

.sidenav-container {
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: #3f51b5;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}

ลองดูที่หน้าเว็บของเรา

เกือบได้ตามเป้าหมายของเราแล้ว

ต่อเลย ไฟล์ side-nav.component.scss แก้ไข
.sidenav-container {
 height: 100%;
}
เป็น
.sidenav-container {
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
}

ผลลัพธ์ที่ได้ เสร็จแล้วแล้วเหมือนกับเป้าหมายที่ต้องการตั้งแต่แรกเป๊ะๆ

ยังไม่พอ layout นี้ยังรองรับการแสดงผลแบบ Responsive ด้วยหากทำการย่อส่วนจอให้เล็กลงจะเห็นว่าเมนูทุกซ่อนไป

จบแล้วสำหรับการสร้างเมนูแบบง่ายๆมากๆกับ angular7 และ material design7 ซึ่งตัวอย่างที่ทำนี้หากใครยังใช้ angular6 ก็สามารถทำได้เช่นกันด้วย step เดียวกันเลย สำหรับตัวอย่างที่ทำนี้คงเป็นประโยชน์ต่อผู้อ่านที่ผ่านเข้ามานะครับ

Source Code: https://gitlab.com/angkarn9/ng7-menu-sidenav
Checkout ไปที่ branch part1 นะครับ

ติดตามภาค 2 ได้ที่นี่ครับ

https://medium.com/printcode/how-to-build-menu-with-angular7-and-material-design7-part2-4c6d37e888ba