@libs-ui/pipes-format-text-capitalize

Pipe Angular viết hoa chữ cái đầu mỗi từ trong chuỗi, hỗ trợ nhiều tùy chọn format linh hoạt.

Giới thiệu

LibsUiPipesFormatTextCapitalizePipe là một Angular standalone pipe dùng để chuẩn hóa và định dạng chuỗi văn bản bằng cách viết hoa chữ cái đầu tiên của mỗi từ. Pipe là lớp bọc mỏng (thin wrapper) trên hàm capitalize từ @libs-ui/utils, cho phép sử dụng trực tiếp trong template Angular một cách dễ dàng. Hỗ trợ các tùy chọn như viết thường phần còn lại, loại bỏ emoji, trim khoảng trắng thừa và xóa dấu unicode.

Tính năng

• ✅ Viết hoa chữ cái đầu mỗi từ trong chuỗi
• ✅ Tùy chọn viết thường các ký tự không phải đầu từ (chuẩn hóa tên người)
• ✅ Loại bỏ emoji khỏi chuỗi
• ✅ Trim khoảng trắng đầu/cuối và xóa khoảng trắng thừa giữa các từ
• ✅ Loại bỏ dấu unicode (hỗ trợ tiếng Việt không dấu)
• ✅ Tùy chọn viết hoa toàn bộ ký tự
• ✅ Standalone pipe — import trực tiếp vào component, không cần NgModule

Khi nào sử dụng

• Hiển thị tên người dùng với chữ cái đầu viết hoa (ví dụ: NGUYEN VAN A → Nguyen Van A)
• Format tiêu đề, heading trong UI từ dữ liệu API trả về chữ thường hoặc chữ hoa toàn bộ
• Chuẩn hóa dữ liệu text input từ người dùng trước khi hiển thị
• Xử lý chuỗi có chứa emoji hoặc ký tự unicode đặc biệt cần làm sạch

Cài đặt

npm install @libs-ui/pipes-format-text-capitalize

Import

import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';

Để sử dụng type ITextFormatOptions cho phần options:

import { ITextFormatOptions } from '@libs-ui/interfaces-types';

Ví dụ sử dụng

Ví dụ 1 — Cơ bản (viết hoa chữ cái đầu mỗi từ)

import { Component } from '@angular/core';
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';

@Component({
  selector: 'app-basic-example',
  standalone: true,
  imports: [LibsUiPipesFormatTextCapitalizePipe],
  template: `
    <p>{{ 'hello world' | LibsUiPipesFormatTextCapitalizePipe }}</p>
    <!-- Output: Hello World -->

    <p>{{ 'angular is awesome' | LibsUiPipesFormatTextCapitalizePipe }}</p>
    <!-- Output: Angular Is Awesome -->
  `,
})
export class BasicExampleComponent {}

Ví dụ 2 — Format tên người (chuẩn hóa từ chữ hoa toàn bộ)

import { Component } from '@angular/core';
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';

@Component({
  selector: 'app-name-example',
  standalone: true,
  imports: [LibsUiPipesFormatTextCapitalizePipe],
  template: `
    <p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
    <!-- Output: Nguyen Van A -->

    <p>{{ 'tRAN tHI B' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
    <!-- Output: Tran Thi B -->
  `,
})
export class NameExampleComponent {
  fullNameOptions: ITextFormatOptions = {
    lowercaseOtherCharacter: true,
    trim: true,
    removeMultipleSpace: true,
  };
}

Ví dụ 3 — Xử lý chuỗi có emoji

import { Component } from '@angular/core';
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';

@Component({
  selector: 'app-emoji-example',
  standalone: true,
  imports: [LibsUiPipesFormatTextCapitalizePipe],
  template: `
    <p>{{ 'hello 👋 world 🌍' | LibsUiPipesFormatTextCapitalizePipe:emojiOptions }}</p>
    <!-- Output: Hello  World  -->

    <p>{{ 'chào 😊 mừng 🎉' | LibsUiPipesFormatTextCapitalizePipe:emojiOptions }}</p>
    <!-- Output: Chào  Mừng  -->
  `,
})
export class EmojiExampleComponent {
  emojiOptions: ITextFormatOptions = {
    removeEmoji: true,
    trim: true,
    removeMultipleSpace: true,
  };
}

Ví dụ 4 — Nhiều tùy chọn kết hợp

import { Component } from '@angular/core';
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';

@Component({
  selector: 'app-complex-example',
  standalone: true,
  imports: [LibsUiPipesFormatTextCapitalizePipe],
  template: `
    <p>{{ '  HELLO   WORLD   example  👋  ' | LibsUiPipesFormatTextCapitalizePipe:complexOptions }}</p>
    <!-- Output: Hello World Example -->
  `,
})
export class ComplexExampleComponent {
  complexOptions: ITextFormatOptions = {
    lowercaseOtherCharacter: true,
    trim: true,
    removeMultipleSpace: true,
    removeEmoji: true,
  };
}

Ví dụ 5 — Dùng trong TypeScript (không cần inject pipe)

Pipe là thin wrapper của hàm capitalize trong @libs-ui/utils. Khi cần xử lý trong TypeScript, import và dùng thẳng hàm đó:

import { Component } from '@angular/core';
import { capitalize } from '@libs-ui/utils';

@Component({
  selector: 'app-ts-example',
  standalone: true,
  template: `
    <p>{{ formattedName }}</p>
    <p>{{ formattedTitle }}</p>
  `,
})
export class TsExampleComponent {
  // Gọi trực tiếp trong TypeScript — không cần inject pipe
  formattedName = capitalize('NGUYEN VAN A', {
    lowercaseOtherCharacter: true,
    trim: true,
  });
  // Output: 'Nguyen Van A'

  formattedTitle = capitalize('hello world', {
    trim: true,
    removeMultipleSpace: true,
  });
  // Output: 'Hello World'
}

Transform

Pipe nhận một giá trị chuỗi và một object tùy chọn:

<!-- Cú pháp cơ bản -->
{{ text | LibsUiPipesFormatTextCapitalizePipe }}

<!-- Cú pháp với options -->
{{ text | LibsUiPipesFormatTextCapitalizePipe:options }}

| Tham số | Type | Bắt buộc | Default | Mô tả | Ví dụ | |---|---|---|---|---|---| | value | string | Có | — | Chuỗi cần format | 'hello world' | | options | ITextFormatOptions | Không | undefined | Tùy chọn định dạng | { trim: true } |

Các tùy chọn trong ITextFormatOptions

| Tùy chọn | Type | Default | Mô tả | Ví dụ kết quả | |---|---|---|---|---| | uppercaseOtherCharacter | boolean | false | Viết hoa tất cả ký tự (kể cả không phải đầu từ) | 'hello world' → 'HELLO WORLD' | | lowercaseOtherCharacter | boolean | false | Viết thường các ký tự không phải đầu từ | 'HELLO WORLD' → 'Hello World' | | trim | boolean | false | Loại bỏ khoảng trắng đầu và cuối chuỗi | ' hello ' → 'hello' | | removeMultipleSpace | boolean | false | Thay thế nhiều khoảng trắng liên tiếp bằng một khoảng | 'hello world' → 'Hello World' | | removeEmoji | boolean | false | Loại bỏ emoji khỏi chuỗi | 'hello 👋' → 'Hello ' | | removeUnicode | boolean | false | Loại bỏ dấu unicode (bỏ dấu tiếng Việt) | 'Nguyễn Văn A' → 'Nguyen Van A' |

Types & Interfaces

import { ITextFormatOptions } from '@libs-ui/interfaces-types';

interface ITextFormatOptions {
  uppercaseOtherCharacter?: boolean;  // Viết hoa tất cả ký tự
  lowercaseOtherCharacter?: boolean;  // Viết thường các ký tự không phải đầu từ
  trim?: boolean;                     // Trim khoảng trắng đầu/cuối
  removeMultipleSpace?: boolean;      // Xóa khoảng trắng thừa giữa các từ
  removeEmoji?: boolean;              // Xóa emoji
  removeUnicode?: boolean;            // Xóa dấu unicode
}

Lưu ý quan trọng

⚠️ Mặc định chỉ viết hoa chữ đầu: Không truyền options, pipe chỉ viết hoa chữ cái đầu mỗi từ và giữ nguyên phần còn lại. Ví dụ: 'hELLO wORLD' → 'HELLo WORLd' (không đổi phần sau).

⚠️ lowercaseOtherCharacter để chuẩn hóa tên: Khi cần format tên người từ dữ liệu ALL-CAPS (ví dụ từ API), luôn bật lowercaseOtherCharacter: true kết hợp với trim: true và removeMultipleSpace: true.

⚠️ uppercaseOtherCharacter và lowercaseOtherCharacter loại trừ nhau: Không nên bật cả hai cùng lúc — kết quả sẽ phụ thuộc vào thứ tự xử lý nội bộ và có thể không như mong đợi.

⚠️ Dùng trong TypeScript: Nếu cần xử lý trong file .ts, hãy import và dùng thẳng hàm capitalize từ @libs-ui/utils thay vì inject pipe — nhẹ hơn và không cần DI.

⚠️ Tên pipe trong template: Tên pipe là LibsUiPipesFormatTextCapitalizePipe (tên đầy đủ), không phải capitalize. Đây là tên được định nghĩa trong name của decorator @Pipe.