Capitalize Pipe

Pipe viết hoa chữ cái đầu tiên của mỗi từ trong chuỗi, hỗ trợ nhiều tùy chọn format.

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ừ (cho tên ngườii)
• ✅ Hỗ trợ loại bỏ emoji
• ✅ Trim khoảng trắng và xóa khoảng trắng thừa
• ✅ Loại bỏ dấu unicode (tiếng Việt)

Cài đặt

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

Sử dụng

Trong Template

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

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

Format tên ngườii

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

fullNameOptions: ITextFormatOptions = {
  lowercaseOtherCharacter: true,
  trim: true,
  removeMultipleSpace: true,
};

<p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
<!-- Output: Nguyen Van A -->

Xử lý emoji

<p>{{ 'hello 👋 world 🌍' | LibsUiPipesFormatTextCapitalizePipe:{removeEmoji: true} }}</p>
<!-- Output: Hello World -->

Nhiều tùy chọn

<p>{{ ' HELLO WORLD example 👋 ' | LibsUiPipesFormatTextCapitalizePipe:complexOptions }}</p>
<!-- Output: Hello World Example -->

complexOptions = {
  lowercaseOtherCharacter: true,
  trim: true,
  removeMultipleSpace: true,
  removeEmoji: true,
};

Dùng trong TypeScript

Pipe là thin wrapper của hàm capitalize trong @libs-ui/utils. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó — không cần inject pipe:

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

// Cơ bản
const result = capitalize('hello world');
// Output: 'Hello World'

// Với options (tên người):
const name = capitalize('NGUYEN VAN A', {
  lowercaseOtherCharacter: true,
  trim: true,
});
// Output: 'Nguyen Van A'

Công nghệ sử dụng

| Công nghệ | Mô tả | | ------------------------- | --------------------------------- | | Angular 18+ | Pipe transform với standalone API | | @libs-ui/utils | capitalize utility function | | @libs-ui/interfaces-types | ITextFormatOptions interface |

API Reference

Pipe Name

LibsUiPipesFormatTextCapitalizePipe

Parameters

| Parameter | Type | Default | Description | | --------- | -------------------- | ----------- | ---------------- | | value | string | required | Chuỗi cần format | | options | ITextFormatOptions | undefined | Tùy chọn format |

ITextFormatOptions

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

Usage Syntax

<!-- Cơ bản -->
{{ text | LibsUiPipesFormatTextCapitalizePipe }}

<!-- Với options -->
{{ text | LibsUiPipesFormatTextCapitalizePipe:options }}

Unit Tests

Xem chi tiết tại test-commands.md

# Chạy test cho pipe này
npx nx test pipes-format-text-capitalize
npx nx test pipes-format-text-capitalize --no-cache

Demo

• Local: http://localhost:4500/pipes/format-text/capitalize
• Production: (sau khi deploy)

License

MIT