Angular 4 Material

Materials cung cấp sẵn rất nhiều built-in module cho project của bạn. Một số tính năng như autocomplete, datepicker, slider, menu, grid và các toolbar được sử dụng cùng với material trong Angular 4.

Angular 2 vẫn còn để các material trong package @angular/core, còn Angular 4 thì được tách thành một package riêng là @angular/materials. Các thành phần của material phụ thuộc vào animation module cho các tính năng nâng cao. Vì thế mà bạn cũng có thể cần import package @angular/animations như trong bài trước chúng ta đã học.

Cài đặt material

Để bắt đầu sử dụng material, chúng ta cần cài đặt 2 package: materialscdk bằng cách sử dụng lệnh sau trong command line

npm install --save @angular/material @angular/cdk

Để kiểm tra xem material và cdk đã được cài đặt thành công hay chưa, chúng ta cùng mở file package.json

package.json
{
  "name": "smart-note",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/material": "^6.3.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.2",
    "@angular-devkit/build-angular": "~0.6.3",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.3",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Nếu trong file package.json của bạn xuất hiện @angular/material và @angular/cdk thì bạn đã cài đặt thành công materialcdk rồi đấy.

Để hiểu rõ hơn về material, chúng ta cùng đi vào ví dụ sử dụng 3 thành phần của material: side nav, menucalendar.

Sử dụng material side nav

Đầu tiên, ta cần import module side nav vào trong project bằng cách sửa file app.module.ts

app.component.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Chúng ta import luôn module button vì lát nữa ta sẽ sử dụng button để toggle nav ẩn/hiện. Tiếp theo, sửa file app.component.html để có giao diện của nav

app.component.html
<div >
    <mat-sidenav-container class="example-container">
        <mat-sidenav style="background-color: lavenderblush;" [mode]="side" #sidenav>
            <p class="nav-content">Freetuts.net - nav </p>
        </mat-sidenav>

        <mat-sidenav-content style="text-align: center">
            <p>
                <button mat-button (click)="sidenav.toggle()">Toggle</button>
            </p>

        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

Chạy project lên, ta thấy giao diện hiển thị

Kết quả hiển thị khi thêm material side nav

Khi click vào button toggle, side nav hiện ra

Kết quả hiển thị side nav khi click vào button toggle

Đơn giản, phải không nào ;).

Sử dụng material menu

Đầu tiên, ta khai báo thêm MatMenuModule và thêm vào mảng import trong app.module.ts

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Bên giao diện app.component.html, chúng ta thay đổi nội dung thành

app.component.html
<div>
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item>
            File
        </button>
        <button mat-menu-item>
            Save As
        </button>
    </mat-menu>
</div>

Thử chạy project lên và kiểm tra, ta thấy như hình

Kết quả hiển thị khi cài đặt material menu

Khi click vào button menu, các menu con hiện ra

Kết quả hiển thị khi click vào button menu

Sử dụng datepicker

Đầu tiên, ta khai báo module datepicker bên trong app.module.ts. Module datepicker bao gồm 3 module con: MatDatepickerModule, MatInputModule, MatNativeDateModule. Ta cần import và khai báo 3 module này bên trong mảng import như bên dưới

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatSidenavModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sau đó bên file app.component.html, ta thêm nội dung sau để datepicker hiển thị lên

app.component.html
 <mat-form-field>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

Khi chạy lên trình duyệt, datepicker hiển thị lên như hình dưới

Kết quả hiển thị datepicker

Về cơ bản thì angular material được sử dụng như vậy. Ngoài ba thành phần mà chúng ta làm bên trên, angular còn rất nhiều thành phần khác như select, checkbox, radio button, card, grid, list,... Bạn có thể tham khảo thêm về các material tại link này.

Bài học về material trong Angular 4 đến đây là kết thúc rồi. Hẹn gặp lại các bạn trong các bài hướng dẫn tiếp theo.

Khóa học Angular 1x kết hợp với PHP và MySQL rất hay

Nếu bạn đang tìm hiểu Angular 1x + PHP/MySQL thì hãy tham khảo khóa học tạo ứng dụng Angular này, đây là khóa học được biên soạn bởi anh Việt, giảng viên tại fedu.vn. Trong khóa học này bạn sẽ được hướng dẫn sử dụng Angular 1  để hiển thi dữ liệu được trả về từ Server (PHP và MySQL).

-------------------#####-------------------

-------------------#####-------------------

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 20: Học lập trình Angular js/MySQL/PHP

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Lập trình FULLSTACK với ANGULAR - PHP - MYSQL

(Giảng viên: )

XEM
KYNA - Lập trình Fullstack với Angular - PHP - MySQL

(Giảng viên: Nguyễn Đức Việt)

XEM