Angular Material là gì: Các thao tác cơ bản với Angular Material

Nội dung chính

Angular Material là gì?
Thao tác cơ bản với Angular Material
Tạo dự án Angular App đơn giản với Angular Material
Câu hỏi thường gặp về Angular Material
Tổng kết về Angular Material

Angular là một framework front-end phổ biến trong lĩnh vực lập trình và phát triển website, trong đó có một công cụ được thiết kế để tích hợp với Angular chính là Angular Material. Angular Material được xem là thư viện Giao diện người dùng (UI) dành cho các lập trình viên Angular.

Đọc bài viết sau đây để được giải đáp chi tiết hơn về:

Định nghĩa về Angular Material, các tính năng nổi bật và lợi ích mà thư viện này mang lại
Hướng dẫn cách cài đặt và tạo dự án Angular đơn giản với Angular Material

Angular Material là gì?

Angular Material là thư viện component giao diện người dùng (UI) dành cho các lập trình web Angular. Thư viện này được xây dựng để tích hợp liền mạch với Angular.

Angular Material triển khai các thông số kỹ thuật thiết kế vật liệu của Google, cung cấp hơn 30 components UI giúp bạn lập trình các trang web với nhiều chức năng hấp dẫn trong khi vẫn tuân thủ đúng các nguyên tắc thiết kế web hiện đại.

Một số điểm nổi bật của thư viện Angular Material có thể kể đến như:

Chủ đề sẵn (Pre-built theme): Cung cấp các chủ đề có sẵn theo các nguyên tắc thiết kế, giúp các lập trình viên tiết kiệm thời gian tập trung vào các chức năng của web thay vì yếu tố thiết kế.
Thư viện UI components: Cung cấp một bộ các thành phần UI có thể tái sử dụng, được kiểm tra kỹ lưỡng cũng như có thể truy cập dựa trên Material Design.
Khả năng tương thích: Angular Material hoạt động trên các trình duyệt chính như Chrome, Mozilla Firefox, Microsoft Edge hoặc Safari.
Truy cập: Đem lại nội dung web nhất quán và thân thiện với người dùng hơn. Các thành phần của Angular Material được thiết kế có khả năng truy cập, hỗ trợ thuộc tính ARIA và các tính năng liên quan đảm bảo trang web có thể truy cập được nhiều đối tượng nhất có thể.
Tính toàn cầu hóa: Ứng dụng được trên nhiều quốc gia với nhiều ngôn ngữ tương thích.
Tốc độ phản hồi: Angular Material sử dụng bố cục dạng lưới linh hoạt, thích ứng với nhiều kích thước và màn hình khác nhau. Bạn có thể dễ dàng xem được trình duyệt trên điện thoại, máy tính bảng hoặc laptop đều thích hợp.
Hiệu suất: Các thành phần được tối ưu hóa để tăng hiệu suất, giảm thiểu thời gian tải ứng dụng. Điều này giúp cải thiện trải nghiệm người dùng hiệu quả hơn.
Tích hợp với Angular: Angular Material được tích hợp liền mạch với Angular, tận dụng hệ sinh thái bao gồm Angular CLI, RxJS Observables,… giúp tăng khả năng hiệu suất và khả năng truy cập.

Xem thêm: Angular là gì? Có phải là vũ khí hạng nặng của Front End Developer?

Thao tác cơ bản với Angular Material

Thiết lập Environment cho Angular

Để làm việc với Angular, bạn sẽ cần Node.js và Angular CLI (giao diện dòng lệnh) được cài đặt trong môi trường phát triển của mình. Node.js sẽ cung cấp các gói mà CLI cần để hoạt động và máy chủ phát triển để bạn có thể kiểm tra tiến trình của mình theo thời gian thực.

Angular CLI sẽ là công cụ giúp bạn tạo dự án Angular mới và định hình cấu hình các thành phần hoặc dịch vụ Angular. Một dự án Angular sử dụng TypeScript nên cần được biên dịch và tối ưu hóa để chạy trình duyệt, nếu không có Angular CLI bạn sẽ cần thiết lập và kết nối nhiều công cụ để làm việc cùng nhau. Điều này sẽ dẫn đến tốn nhiều thời gian.

Nếu bạn chưa cài đặt Node.js trên máy tính, có thể truy cập website và làm theo hướng dẫn tải xuống. Sau khi cài đặt Node.js, hãy sử dụng NPM (đi kèm với Node.js) để cài đặt Angular CLI:

npm install -g @angular/cli

Ngoài ra, tùy thuộc vào cách thiết lập máy tính mà bạn có thể cần sử dụng sudo để dùng cờ -g (global)

Tạo Angular Project

Sau khi cài đặt đúng Node.js và Angular CLI trên máy tính, bạn có thể sử dụng lệnh sau để thiết lập một dự án Angular mới:

# tạo một dự án Angular mới thuộc angular-material-tutorial
ng new angular-material-tutorial

# dời vào dự án mới
cd angular-material-tutorial

Lệnh đầu tiên sẽ tạo ra một cấu trúc thư mục (trong một thư mục mới có tên là angular-material-tutorial) với nhiều tệp cần thiết để bạn có thể tạo ứng dụng Angular cho mình.

Trong quá trình tạo project, CLI sẽ hỏi một số câu hỏi về cấu hình project (như sử dụng routing hay không, sử dụng CSS hay SCSS, etc.). Lệnh thứ hai sẽ di chuyển terminal của bạn vào thư mục gốc của dự án.

Cài đặt Angular Material

Để cài đặt Angular Material làm phần phụ thuộc của dự án, bạn hãy chạy lệnh sau:

npm install @angular/material @angular/cdk

Hiện tại, bạn sẽ không thực hiện bất kỳ thay đổi nào đối với mã nguồn của dự án. Trước tiên, bạn sẽ cài đặt thêm một số dependency thú vị cho dự án của mình.

Bạn cũng có thể sử dụng Angular CLI để thêm Angular Material vào project. Lệnh này không chỉ cài đặt các package cần thiết mà còn tự động cấu hình một số tính năng cơ bản.

ng add @angular/material

Angular Material Theme

Sau khi cài đặt Angular Material, bạn sẽ định hình một chủ đề xác định màu sắc nào sẽ được sử dụng trong các thành phần Angular Material của mình. Để định hình chủ đề cơ bản, bạn hãy mở tệp src/style.css và dán mã sau:

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

Angular Material Gesture

Một số components như Slide Toggle, Slider hoặc Tooltip đều dựa vào thư viện HammerJS để ghi lại các cử chỉ chạm (touch gestures). Vì vậy, bạn sẽ cần cài đặt HammerJS và tải nó vào ứng dụng của mình. Để thực hiện, từ thư mục gốc của dự án, hãy chạy:

# from angular-material-tutorial

npm install hammerjs

Sau khi cài đặt, hãy thêm dòng sau vào đầu tệp src/main.ts:

import 'hammerjs';

Tuy nhiên, từ Angular 9 trở lên, HammerJS không còn là dependency bắt buộc cho hầu hết các components.

Material Icons

Một yếu tố bạn có thể cân nhắc để thêm vào dự án Angular của mình là thư viện Material Icon. Để có quyền truy cập vào thư viện khổng lồ này, bạn có thể cập nhật tệp src/index.html như sau:

<!doctype html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
</html>

Tạo dự án Angular App đơn giản với Angular Material

Sau khi đã thiết lập cấu trúc dự án Angular và một số phụ thuộc, bạn sẽ bắt đầu phát triển ứng dụng như sau:

Nhập Material Components

Điều đầu tiên bạn cần làm là tạo một tệp mới có tên là material.modules.ts trong thư mục ./src/app. Bên trong tệp này, bạn cần thêm mã sau:

import {NgModule} from '@angular/core';

@NgModule({
  imports: [],
  exports: []
})
export class MaterialModule {}

Ý tưởng tạo một module Angular mới là tập trung những gì bạn sẽ nhập từ Angular Material vào một file duy nhất. Trước khi thêm các thành phần Angular Material vào file, bạn sẽ cần nhập cấu hình nó trong module chính của mình (tức là file ./src/app/app.module.ts) như sau:

// ... other import statements ...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';

@NgModule({
  // ... declarations property ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
  ],
  // ... providers and bootstrap properties ...
})
export class AppModule {}

Angular Material Sidenav

Sau khi xác định một nơi tập trung để nhập các thành phần Angular Material, bạn có thể tập trung vào việc thêm thanh điều hướng vào ứng dụng của mình. Với điều này, bạn có thể cập nhật file để trông như thế này:

import {NgModule} from '@angular/core';

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
  ],
  exports: [
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
  ]
})
export class MaterialModule {}

Thay đổi này sẽ làm cho MatSidenavModule khả dụng trong ứng dụng của bạn. Sau đó, bạn có thể cập nhật file để sử dụng thành phần này:

<mat-sidenav-container>

  <mat-sidenav  #sidenav role="navigation">

   <mat-nav-list>

    <a mat-list-item>

      <mat-icon class="icon">input</mat-icon>

      <span class="label">Login</span>

    </a>

    <a mat-list-item>

      <mat-icon class="icon">home</mat-icon>

        <span class="label">Home</span>

    </a>

    <a mat-list-item>

      <mat-icon class="icon">dashboard</mat-icon>

      <span class="label">Dashboard</span>

    </a>

    <a  mat-list-item type="button">

      <mat-icon class="icon">input</mat-icon>

      <span class="label">LogOut</span>

    </a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

     <div fxHide.gt-xs>

       <button mat-icon-button>

        <mat-icon>menu</mat-icon>

      </button>

    </div>

     <div>

       <a>

          Material Blog

       </a>

     </div>

     <div fxFlex fxLayout fxLayoutAlign="flex-end"  fxHide.xs>

        <ul fxLayout fxLayoutGap="20px" class="navigation-items">

            <li>

                <a>

                  <mat-icon class="icon">input</mat-icon>

                  <span  class="label">Login</span>

                 </a>

            </li>

            <li>

              <a >

                  <mat-icon class="icon">home</mat-icon>

                  <span class="label">Home</span>

              </a>

            </li>

            <li>

                <a>

                    <mat-icon class="icon">dashboard</mat-icon>

                    <span class="label">Dashboard</span>

                </a>

              </li>

            <li>

                <a>

                  <mat-icon class="icon">input</mat-icon>

                  <span class="label">LogOut</span>

                 </a>

            </li>

        </ul>

     </div>

    </mat-toolbar>

    <main>

    </main>

  </mat-sidenav-content>

</mat-sidenav-container>

Angular Material và Flexbox

Để giúp bạn dễ dàng hơn khi xác định bố cục ứng dụng Angular, bạn sẽ tận dụng lược đồ bố cục Flex được giới thiệu gần đây trên CSS. Cụ thể hơn, bạn sẽ sử dụng chỉ thị Angular có tên là fxFlex để xử lý bố cục Flex. Bạn có thể cài đặt Flex theo lệnh sau:

npm install @angular/flex-layout

Sau đó, bạn nhập cấu hình của nó vào file src/app.modules.ts như hiển thị sau:

// ... other import statements ...
import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
  // ... declarations property ...
  imports: [
    // ... other modules ...
    FlexLayoutModule,
  ],
  // ... providers and bootstrap properties ...
})
export class AppModule {}

Trước khi chạy ứng dụng lần đầu tiên, bạn hãy thêm các quy tắc CSS sau vào app.components.css để điều hướng của bạn trông ổn hơn:

mat-sidenav-container, mat-sidenav-content, mat-sidenav {
  height: 100%;
}

mat-sidenav {
  width: 250px;
}

a {
  text-decoration: none;
  color: white;
}

a:hover,
a:active {
  color: lightgray;
}

.navigation-items {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.icon {
  display: inline-block;
  height: 30px;
  margin: 0 auto;
  padding-right: 5px;
  text-align: center;
  vertical-align: middle;
  width: 15%;
}

.label {
  display: inline-block;
  line-height: 30px;
  margin: 0;
  width: 85%;
}

Bên cạnh đó, bạn cũng thêm quy tắc sau vào ./src/style.css để ứng dụng của bạn không có bất kỳ lề trắng nào:

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

body {
  margin: 0;
}

Với các quy tắc này, bạn có thể giải quyết ng serve từ root dự án của mình để kiểm tra ứng dụng của bạn trong lần đầu tiên chạy thử.

Thêm Angular Material Components

Bây giờ bạn đã có ứng dụng và chạy với thành phần Angular Material đầu tiên, bạn có thể thêm nhiều tính năng hơn cho dự án của mình. Đầu tiên, bạn sẽ định nghĩa hai thành phần mới cho ứng dụng của mình là WelcomeComponent và DashboardComponent. Để tạo hai thành phần mới, bạn có thể sử dụng Angular CLI như sau:

ng g c welcome

ng g c dashboard

Điều quan trọng là phải xác định module.app.module vì bạn có một module khác là material.module khiến Angular CLI không thể tự động xác định module mục tiêu. Sau khi chạy hai lệnh này, hãy mở welcome.component.html và thay thế mã bằng hai mã này:

<div style="text-align:center">
  <h1>Angular Content Management System</h1>
  <p>
    This is a platform for technical writers to manage their blog post contents related to angular.
    <br> Click on Login to get Started!!!
  </p>
</div>

Tạo Routes

Khi đã có các thành phần, bạn sẽ cần định nghĩa một số điều hướng (route) để người dùng có thể truy cập chúng. Để thực hiện điều này, bạn có thể tạo một tệp có tên là app-routing.module.ts trong thư mục ./src/app và thêm mã sau:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {WelcomeComponent} from './welcome/welcome.component';
import {DashboardComponent} from './dashboard/dashboard.component';

const routes: Routes = [
  {path: '', component: WelcomeComponent},
  {path: 'dashboard', component: DashboardComponent}
];

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

Trong file này, bạn định nghĩa hai routes là một cho WelcomeComponent và một cho DashboardComponent. Bên cạnh việc định nghĩa module, bạn cũng cần cập nhật tệp app.component.html để thêm liên kết các tuyến đường mới này:

<mat-sidenav-container>

  <mat-sidenav  #sidenav role="navigation">

   <mat-nav-list>

    <a mat-list-item>

      <mat-icon class="icon">input</mat-icon>

      <span class="label">Login</span>

    </a>

    <a mat-list-item

        routerLink="/">

      <mat-icon class="icon">home</mat-icon>

        <span class="label">Home</span>

    </a>

    <a mat-list-item

      routerLink="/dashboard">

      <mat-icon class="icon">dashboard</mat-icon>

      <span class="label">Dashboard</span>

    </a>

    <a  mat-list-item

        type="button">

      <mat-icon class="icon">input</mat-icon>

      <span class="label">LogOut</span>

    </a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

     <div fxHide.gt-xs>

       <button mat-icon-button (click)="sidenav.toggle()">

        <mat-icon>menu</mat-icon>

      </button>

    </div>

     <div>

       <a routerLink="/">

          Material Blog

       </a>

     </div>

     <div fxFlex fxLayout fxLayoutAlign="flex-end"  fxHide.xs>

        <ul fxLayout fxLayoutGap="20px" class="navigation-items">

            <li>

                <a>

                  <mat-icon class="icon">input</mat-icon>

                  <span  class="label">Login</span>

                 </a>

            </li>

            <li>

              <a

                routerLink="/">

                  <mat-icon class="icon">home</mat-icon>

                  <span class="label">Home</span>

              </a>

            </li>

            <li>

                <a

                  routerLink="/dashboard">

                    <mat-icon class="icon">dashboard</mat-icon>

                    <span class="label">Dashboard</span>

                </a>

              </li>

            <li>

                <a>

                  <mat-icon class="icon">input</mat-icon>

                  <span class="label">LogOut</span>

                 </a>

            </li>

        </ul>

     </div>

    </mat-toolbar>

    <main>

      <router-outlet></router-outlet>

    </main>

  </mat-sidenav-content>

</mat-sidenav-container>

Cuối cùng, bạn cần cập nhật thêm tệp app.module.ts để sử dụng module mới:

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
  ],
})
export class AppModule {}

Nếu bạn tiến hành chạy thử module của mình, bạn sẽ thấy nội dung được định nghĩa trong tệp HTML của WelcomeComponent. Nếu bạn nhấp vào liên kết Dashboard, bạn sẽ thấy tải thông báo “dashboard works!”

Câu hỏi thường gặp về Angular Material

Angular Material vs Bootstrap: Đâu là framework phổ biến hơn?

Bootstrap là một framework CSS mã nguồn mở giúp xây dựng web và các ứng dụng di động. Bootstrap cung cấp một loại các thiết kế HTML và CSS cùng các thành phần được định kiểu trước như danh sách thả xuống, thanh tiến trình và mẫu điều hướng.

Bạn có thể sử dụng các phần của Angular Material và Bootstrap trong cùng một dự án lập trình web hoặc ứng dụng di động. Tuy nhiên, các lập trình viên cần cẩn thận không sử dụng cùng một thành phần, bởi chúng có thể gây xung đột với nhau.

Một số điểm khác nhau giữa Angular Material và Bootstrap bạn cần lưu ý như:

Tiêu chí	Angular Material	Bootstrap
Components	Bộ chọn ngày, slider, toolbar, icon,…	Carousel, tính năng thu gọn,…
Card	Cung cấp thiết kế card đơn giản	Cung cấp tùy chọn màu sắc khác nhau
Dialog/Model	Chỉnh sửa và chuyển dữ liệu	Tùy chỉnh khả năng đáp ứng của pop-ups
Menu	Thanh công cụ mở rộng và sidebar	Thanh điều hướng có thể thu gọn (collapsible) và mở rộng (extendable)
Expansion Panel	Hiển thị tóm tắt nội dung với thiết kế hiện đại	Cải tiến về kiểu dáng CSS
Kiến trúc	Nhiều chức năng cốt lõi với đa dạng tùy chọn	Kiến trúc tập trung vào UI
Responsive Design	Có hỗ trợ nhưng không toàn diện	Có hỗ trợ
Khả năng truy cập và toàn cầu hóa	Theo tiêu chuẩn WCAG 2.0 và cung cấp hỗ trợ ARIA	Theo tiêu chuẩn WCAG 2.0 và hỗ trợ i18n bổ sung

Khi nào nên sử dụng Angular Material?

Một số điểm mạnh ở Angular Material mà bạn có thể cân nhắc khi sử dụng framework này, cụ thể như:

Sử dụng thiết kế Angular Material
Cung cấp hệ sinh thái thiết kế của Google: Material Design có thể nhận dạng được vì là kiểu mặc định của Google, giúp người dùng dễ dàng sử dụng cùng giao diện với Google như Gmail, Google Drive hoặc Google Calendar.
Khả năng xây dựng web nhanh chóng: Điều này sẽ giúp tăng tốc độ dự án bằng cách sử dụng thành phần được tạo sẵn và mở rộng dự án bằng cách sử dụng CDK hoặc sơ đồ để tạo thành phần.
Khi cần hỗ trợ cho các trình duyệt cũ: Angular Material có thể không hỗ trợ tốt cho các phiên bản trình duyệt cũ.

Tổng kết về Angular Material

Angular Material là một thư viện thích hợp để tạo các ứng dụng web với hiệu ứng hấp dẫn và nhất quán. Bên cạnh đó, nó cũng là một framework thích hợp với những bạn mới bắt đầu tìm hiểu về Angular cùng những lợi ích tuyệt vời của nó.

Nếu bạn có định hướng phát triển lập trình theo Angular hoặc các ứng dụng mạnh mẽ thì Angular Material sẽ là một thư viện đáng để bạn cân nhắc đấy!