@libs-ui/pipes-check-selected-by-key

Pipe kiểm tra xem một giá trị có tồn tại trong mảng các key đã chọn hay không.

Giới thiệu

LibsUiPipesCheckSelectedByKeyPipe là Angular pure pipe dùng để kiểm tra xem một giá trị có thuộc danh sách các key đã được chọn hay không. Pipe hỗ trợ mọi kiểu dữ liệu (string, number, object reference) và xử lý an toàn các trường hợp null/undefined. Đặc biệt, pipe sử dụng tham số length như một trigger để ép pure pipe chạy lại khi nội dung mảng bị mutate mà không thay đổi reference.

Tính năng

• ✅ Kiểm tra nhanh sự tồn tại của giá trị trong mảng bằng strict equality (===)
• ✅ Hỗ trợ mọi kiểu dữ liệu: string, number, object reference
• ✅ Xử lý an toàn null / undefined — luôn trả về false thay vì throw lỗi
• ✅ Tham số length là trigger giúp pure pipe re-run khi mảng bị mutate
• ✅ Standalone — import trực tiếp vào component không cần NgModule

Khi nào sử dụng

• Kiểm tra xem một item có được chọn trong danh sách multi-select hay không
• Hiển thị trạng thái selected/unselected trong UI (checkbox, highlight row, active state)
• Xác định class CSS động dựa trên danh sách key đã chọn
• Filter hoặc validate dữ liệu dựa trên tập hợp keys đã chọn

Cài đặt

npm install @libs-ui/pipes-check-selected-by-key

Import

import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';

@Component({
  standalone: true,
  imports: [LibsUiPipesCheckSelectedByKeyPipe],
  // ...
})
export class YourComponent {}

Ví dụ sử dụng

Ví dụ 1 — Multi-select highlight item

// component.ts
import { Component, signal } from '@angular/core';
import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';

@Component({
  standalone: true,
  imports: [LibsUiPipesCheckSelectedByKeyPipe],
  templateUrl: './fruit-list.component.html',
})
export class FruitListComponent {
  protected selectedFruits = signal<string[]>(['apple', 'banana']);
  protected allFruits = ['apple', 'banana', 'orange', 'grape'];

  protected handlerToggleFruit(event: MouseEvent, fruit: string): void {
    event.stopPropagation();
    const current = [...this.selectedFruits()];
    const index = current.indexOf(fruit);
    if (index >= 0) {
      current.splice(index, 1);
    } else {
      current.push(fruit);
    }
    this.selectedFruits.set(current);
  }
}

<!-- fruit-list.component.html -->
@for (fruit of allFruits; track fruit) {
  <div
    [class.bg-blue-100]="fruit | LibsUiPipesCheckSelectedByKeyPipe : selectedFruits() : selectedFruits().length"
    [class.border-blue-500]="fruit | LibsUiPipesCheckSelectedByKeyPipe : selectedFruits() : selectedFruits().length"
    class="p-3 border rounded cursor-pointer"
    (click)="handlerToggleFruit($event, fruit)">
    {{ fruit }}
    @if (fruit | LibsUiPipesCheckSelectedByKeyPipe : selectedFruits() : selectedFruits().length) {
      <span>✓</span>
    }
  </div>
}

Ví dụ 2 — Kiểm tra số trong danh sách ID đã chọn

// order-list.component.ts
import { Component } from '@angular/core';
import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';

@Component({
  standalone: true,
  imports: [LibsUiPipesCheckSelectedByKeyPipe],
  templateUrl: './order-list.component.html',
})
export class OrderListComponent {
  protected selectedIds = [1, 42, 100];
  protected orders = [
    { id: 1, name: 'Order #1' },
    { id: 42, name: 'Order #42' },
    { id: 99, name: 'Order #99' },
  ];
}

<!-- order-list.component.html -->
@for (order of orders; track order.id) {
  <div [class.active]="order.id | LibsUiPipesCheckSelectedByKeyPipe : selectedIds : selectedIds.length">
    {{ order.name }}
  </div>
}
<!-- Order #1 → active (true) -->
<!-- Order #42 → active (true) -->
<!-- Order #99 → không active (false) -->

Ví dụ 3 — Kiểm tra với giá trị undefined / mảng rỗng (edge cases)

<!-- Mảng rỗng → luôn false -->
{{ 'apple' | LibsUiPipesCheckSelectedByKeyPipe : [] : 0 }}
<!-- Kết quả: false -->

<!-- multiKeys undefined → luôn false -->
{{ 'apple' | LibsUiPipesCheckSelectedByKeyPipe : undefined : undefined }}
<!-- Kết quả: false -->

<!-- length = 0 dù mảng có phần tử → false (không dùng cách này) -->
{{ 'apple' | LibsUiPipesCheckSelectedByKeyPipe : ['apple'] : 0 }}
<!-- Kết quả: false — BUG nếu bạn không truyền đúng length -->

Ví dụ 4 — Sử dụng standalone (pipe.transform())

import { LibsUiPipesCheckSelectedByKeyPipe } from '@libs-ui/pipes-check-selected-by-key';

const pipe = new LibsUiPipesCheckSelectedByKeyPipe();

pipe.transform('apple', ['apple', 'banana'], 2);   // true
pipe.transform('orange', ['apple', 'banana'], 2);  // false
pipe.transform('apple', [], 0);                    // false
pipe.transform('apple', undefined, undefined);     // false
pipe.transform(42, [1, 42, 100], 3);               // true
pipe.transform('42', [42], 1);                     // false (strict equality)

Transform

| Tham số | Type | Bắt buộc | Mô tả | Ví dụ | |---|---|---|---|---| | value | any | Có | Giá trị cần kiểm tra sự tồn tại trong mảng | 'apple', 42, myObj | | multiKeys | Array<any> \| undefined | Có | Mảng các key đã được chọn | ['apple', 'banana'], [1, 42] | | length | number \| undefined | Có | Pure Pipe Trigger — BẮT BUỘC truyền multiKeys.length để pipe re-run khi mảng bị mutate | selectedFruits.length |

Trả về: boolean — true nếu value tồn tại trong multiKeys, ngược lại false.

Cú pháp template:

{{ value | LibsUiPipesCheckSelectedByKeyPipe : multiKeys : length }}
[class.selected]="value | LibsUiPipesCheckSelectedByKeyPipe : multiKeys : length"

Lưu ý quan trọng

⚠️ Tham số length là Pure Pipe Trigger — BẮT BUỘC truyền đúng: Vì đây là pure pipe, Angular chỉ chạy lại khi input thay đổi reference. Khi bạn mutate mảng bằng push() / pop() / splice() mà giữ nguyên reference, pipe sẽ không tự chạy lại. Tham số length được truyền vào để ép Angular detect change và buộc pipe re-run khi số lượng phần tử thay đổi. Luôn truyền myArray.length — không được hardcode số cố định như : 0 hay : 1.

<!-- ✅ ĐÚNG — pipe sẽ re-run khi selectedFruits thay đổi -->
{{ 'apple' | LibsUiPipesCheckSelectedByKeyPipe : selectedFruits : selectedFruits.length }}

<!-- ❌ SAI — pipe KHÔNG re-run vì length cố định -->
{{ 'apple' | LibsUiPipesCheckSelectedByKeyPipe : selectedFruits : 0 }}

⚠️ So sánh strict equality (===): Pipe dùng === để so sánh, không có type coercion. '42' và 42 là hai giá trị khác nhau. Object được so sánh theo reference, không theo value.

<!-- String '42' ≠ Number 42 → false -->
{{ '42' | LibsUiPipesCheckSelectedByKeyPipe : [42] : 1 }}

<!-- Cùng reference object → true -->
<!-- Khác reference dù cùng nội dung → false -->

⚠️ Pipe trả về false cho mọi input không hợp lệ: multiKeys là null, undefined, không phải array, hoặc array rỗng đều trả về false. Tham số length là falsy (0, null, undefined) cũng trả về false — kể cả khi multiKeys có phần tử.

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/pipes/check-selected-by-key