Templates, Directives và Pipes

Trong Angular, Templates, Directives và Pipes là những thành phần quan trọng giúp xây dựng giao diện linh hoạt, có thể tái sử dụng và quản lý dữ liệu hiển thị một cách hiệu quả.

Mục tiêu bài học:

• Hiểu cách viết Templates hiệu quả trong Angular.
• Làm quen với Directives để điều khiển giao diện động.
• Sử dụng Pipes để định dạng dữ liệu hiển thị.

Templates, Directives và Pipes

1. Templates trong Angular

a. Templates là gì?

Templates trong Angular là các đoạn HTML động được liên kết với Component để hiển thị giao diện người dùng.

Ví dụ một Template đơn giản trong app.component.html:

<h1>Chào mừng {{ userName }} đến với Angular!</h1>

Template sử dụng Binding dữ liệu và điều kiện:

<h2 *ngIf="isLoggedIn">Xin chào, {{ userName }}</h2>
<button (click)="logout()">Đăng xuất</button>

Template sử dụng vòng lặp:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Cách viết Template hiệu quả:

• Tránh viết logic phức tạp trong Template, chỉ sử dụng biểu thức đơn giản.
• Tách riêng phần hiển thị và xử lý logic bằng Component.
• Sử dụng Directives và Pipes để tối ưu hóa hiển thị dữ liệu.

2. Directives trong Angular

a. Directives là gì?

Directives là các chỉ thị đặc biệt trong Angular giúp thay đổi cấu trúc hoặc giao diện của Template.
Có 3 loại Directives chính:

1. Structural Directives: Thay đổi cấu trúc DOM (*ngIf, *ngFor, *ngSwitch).
2. Attribute Directives: Thay đổi thuộc tính của phần tử HTML (ngClass, ngStyle).
3. Custom Directives: Directives do lập trình viên tự tạo.

b. Structural Directives

1. *ngIf: Điều kiện hiển thị nội dung

<p *ngIf="isLoggedIn">Chào mừng bạn trở lại!</p>

2. *ngFor: Lặp qua danh sách

<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

3. *ngSwitch: Chọn nội dung hiển thị theo điều kiện

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Bạn là quản trị viên</p>
  <p *ngSwitchCase="'user'">Bạn là người dùng</p>
  <p *ngSwitchDefault">Vai trò không xác định</p>
</div>

c. Attribute Directives

1. ngClass: Thay đổi class động

<p [ngClass]="{ 'highlight': isImportant, 'italic': isItalic }">Đây là một đoạn văn</p>

2. ngStyle: Thay đổi CSS động

<p [ngStyle]="{ 'color': isWarning ? 'red' : 'black', 'font-size': '20px' }">Cảnh báo!</p>

d. Custom Directives (Tạo Directive tùy chỉnh)

Ví dụ: Directive đổi màu nền (highlight.directive.ts)

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = 'white';
  }
}

Sử dụng Directive trong Template:

<p appHighlight>Di chuột vào đây để thấy hiệu ứng</p>

Lợi ích của Directives:

• Giúp tạo giao diện động và tương tác linh hoạt.
• Tái sử dụng để tránh lặp code.

3. Pipes trong Angular

a. Pipes là gì?

Pipes giúp định dạng dữ liệu hiển thị trong Template mà không cần thay đổi dữ liệu gốc.

Cú pháp chung:

{{ value | pipeName }}

b. Pipes có sẵn trong Angular

1. uppercase & lowercase: Chuyển đổi chữ hoa/chữ thường

<p>{{ 'hello world' | uppercase }}</p> <!-- HELLO WORLD -->
<p>{{ 'ANGULAR' | lowercase }}</p> <!-- angular -->

2. date: Định dạng ngày tháng

<p>{{ today | date:'dd/MM/yyyy' }}</p> <!-- 17/03/2025 -->

3. currency: Định dạng tiền tệ

<p>{{ price | currency:'VND':'symbol':'1.2-2' }}</p> <!-- 1.500.000₫ -->

4. json: Hiển thị JSON dưới dạng chuỗi

<pre>{{ user | json }}</pre>

c. Tạo Custom Pipes

Ví dụ: Pipe viết tắt tên (shorten.pipe.ts)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
  transform(value: string, limit: number): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

Sử dụng Pipe trong Template:

<p>{{ 'Angular Framework' | shorten:10 }}</p> <!-- Angular Fr... -->

Lợi ích của Pipes:

• Giúp hiển thị dữ liệu đẹp mắt, dễ đọc.
• Dễ dàng tái sử dụng.

Kết luận

• Templates giúp hiển thị giao diện động, gắn kết với Component.
• Directives giúp thay đổi cấu trúc và kiểu dáng của HTML.
• Pipes giúp định dạng dữ liệu hiển thị mà không làm thay đổi dữ liệu gốc.