> Version: `0.2.355-10` > > Pipe đa năng giúp gọi function xử lý logic ngay trong template, hỗ trợ truyền tham số và xử lý kết quả Async (Observable).
npm install @libs-ui/pipes-call-function-in-template> Version: 0.2.355-10
>
> Pipe đa năng giúp gọi function xử lý logic ngay trong template, hỗ trợ truyền tham số và xử lý kết quả Async (Observable).
LibsUiPipesCallFunctionInTemplatePipe là một giải pháp linh hoạt cho phép bạn thực hiện các phép biến đổi dữ liệu phức tạp ngay trong template HTML của Angular thông qua các hàm helper trong Component, thay vì phải tạo nhiều Pipe đơn lẻ cho từng mục đích cụ thể.
- ✅ Gọi function xử lý logic ngay trong template
- ✅ Hỗ trợ truyền tham số phụ (item, otherData)
- ✅ Xử lý bất đồng bộ (Async) với Observable
- ✅ Tự động xử lý giá trị rỗng (null, undefined, 0)
- ✅ Tùy chỉnh giá trị mặc định cho các trường hợp đặc biệt
- ✅ Standalone pipe (Angular 16+)
- Khi cần xử lý logic phức tạp để hiển thị dữ liệu mà không muốn tạo Pipe riêng biệt cho từng trường hợp.
- Khi cần truyền thêm tham số phụ (item, otherData) vào hàm xử lý.
- Khi logic xử lý có thể tái sử dụng dưới dạng function helper.
- Hỗ trợ xử lý bất đồng bộ (Async) đơn giản trong template.
``bash`
npm install @libs-ui/pipes-call-function-in-template
`typescript
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
@Component({
standalone: true,
imports: [LibsUiPipesCallFunctionInTemplatePipe],
// ...
})
`
`html`
{{ 'hello world' | LibsUiPipesCallFunctionInTemplatePipe : transformUppercase | async }}
`typescript`
transformUppercase = (data: { value: string }): Observable
return of((data.value || '').toUpperCase());
};
`html`
{{ 100 | LibsUiPipesCallFunctionInTemplatePipe : calculateTotal : 5 : 20 | async }}
`typescript$${total.toFixed(2)}
calculateTotal = (data: { value: number; item?: number; otherData?: number }): Observable
const qty = data.item || 0;
const discount = data.otherData || 0;
const total = (data.value * qty) - discount;
return of();`
};
`html
{{ null | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIsEmpty: 'Empty Data' } | async }}
{{ 0 | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIs0: 'Zero Value' } | async }}
`
`html`
@if (('active' | LibsUiPipesCallFunctionInTemplatePipe : fetchStatus | async) as status) {
{{ status }}
} @else {
Loading status...
}
`typescript`
fetchStatus = (data: { value: string }): Observable
const statusMap: Record
'active': 'Đang hoạt động (Online)',
'inactive': 'Ngừng kích hoạt (Offline)',
'pending': 'Đang chờ xử lý'
};
return of(statusMap[data.value] || 'Unknown').pipe(delay(1000));
};
#### Parameters
| Property | Type | Default | Description |
| ------------------ | ------------------------------------ | ----------- | ------------------------------------------------ |
| value | any | - | Giá trị đầu vào cần xử lý. |functionCall
| | TYPE_FUNCTION | undefined | Hàm xử lý logic chính. Nhận object chứa input và params, trả về Observable. |item
| | any | undefined | Tham số phụ thứ nhất truyền vào functionCall. |otherData
| | any | undefined | Tham số phụ thứ hai truyền vào functionCall. |defaultValueEmpty
| | { valueIs0?: any; valueIsEmpty?: any } | undefined | Cấu hình giá trị trả về mặc định khi kết quả là 0 hoặc rỗng/null. |
`typescript`
export type TYPE_FUNCTION
data: { value: any; item?: any; otherData?: any }
) => Observable
Mô tả: Type cho function xử lý logic. Nhận object chứa value, item, otherData và trả về Observable.
> ⚠️ Caveats:
>
> - Yêu cầu async pipe: Pipe này trả về một Observable. Bạn BẮT BUỘC phải sử dụng thêm async pipe trong template để hiển thị giá trị cuối cùng (ví dụ: value | LibsUiPipesCallFunctionInTemplatePipe : fn | async).switchMap
> - Cơ chế SwitchMap: Pipe sử dụng bên trong, do đó hàm xử lý của bạn phải trả về một Observable hoặc Promise.null
> - Xử lý giá trị rỗng: Pipe tích hợp sẵn logic để handle , undefined hoặc 0. Bạn có thể tùy chỉnh thông qua tham số cuối cùng.functionCall
> - Tham số truyền vào: Hàm xử lý () sẽ nhận một object duy nhất chứa { value, item, otherData } để thuận tiện cho việc giải nén (destructuring).
- Angular 18+
- RxJS 7.8+
- TypeScript 5+
- Local Development: http://localhost:4500/pipes/call-function-in-template
Xem file test-commands.md` để biết cách chạy unit tests.
MIT