🔧 CHRV Pipes

Collection de pipes Angular utilitaires pour filtrage, recherche et tri de données

📚 Documentation • 🚀 Installation • 💡 Exemples • 🛠️ API

✨ Pipes disponibles

🔍 FilterPipe

Filtre les tableaux d'objets selon des critères spécifiés et des propriétés ciblées.

🔎 SearchPipe

Recherche textuelle dans les éléments d'un tableau, insensible à la casse.

� SortPipe

Tri les tableaux par propriété avec support des objets, nombres, chaînes et booléens.

📅 DateSortPipe

Tri spécialisé pour les dates avec ordre croissant ou décroissant.

� SafePipe

Sanitise les URLs pour les utiliser en toute sécurité dans les ressources.

🌐 SafeHtmlPipe

Sanitise le HTML pour l'affichage sécurisé dans les templates.

🚀 Installation

# Installation autonome
npm install chrv-pipes

# Ou automatiquement inclus avec chrv-components
npm install chrv-components

⚙️ Configuration

Import dans votre composant/module

import { FilterPipe, SearchPipe } from "chrv-pipes";

@Component({
  standalone: true,
  imports: [FilterPipe, SearchPipe],
  template: `...`,
})
export class MyComponent {}

💡 Exemples d'utilisation

🔍 FilterPipe

Filtre un tableau selon des critères et propriétés spécifiées :

<!-- Filtrer par nom -->
<div *ngFor="let user of users | filter:'John':['name']">{{ user.name }}</div>

// Dans le composant
users = [
  { name: "John Doe", age: 30 },
  { name: "Jane Smith", age: 25 },
  { name: "John Wilson", age: 35 },
];

🔎 SearchPipe

Recherche textuelle dans un tableau :

<!-- Recherche dans tous les champs -->
<input [(ngModel)]="searchTerm" placeholder="Rechercher..." />
<div *ngFor="let item of items | search:searchTerm">{{ item.title }}</div>

📊 SortPipe

Tri un tableau par propriété :

<!-- Tri croissant par nom -->
<div *ngFor="let user of users | sort:true:'name'">{{ user.name }}</div>

<!-- Tri décroissant par âge -->
<div *ngFor="let user of users | sort:false:'age'">{{ user.name }} - {{ user.age }}</div>

<!-- Tri sur plusieurs propriétés -->
<div *ngFor="let user of users | sort:true:['department', 'name']">{{ user.department }} - {{ user.name }}</div>

📅 DateSortPipe

Tri spécialisé pour les dates :

<!-- Tri des événements par date croissante -->
<div *ngFor="let event of events | dateSort:true">{{ event.title }} - {{ event.date }}</div>

� SafePipe

Sanitise les URLs pour les ressources :

<!-- Affichage sécurisé d'une iframe -->
<iframe [src]="videoUrl | safe"></iframe>

🌐 SafeHtmlPipe

Affichage sécurisé de contenu HTML :

<!-- Rendu HTML sanitisé -->
<div [innerHTML]="htmlContent | safeHtml"></div>

## 🛠️ API

### FilterPipe

```typescript
transform(values: any[] | null, filter: any | null, properties: string[]): any[]

Paramètres :

• values : Tableau à filtrer
• filter : Valeur de filtrage
• properties : Propriétés à utiliser pour le filtrage

SearchPipe

transform(values: any[] | null, input: string): any[]

Paramètres :

• values : Tableau dans lequel rechercher
• input : Terme de recherche

SortPipe

transform(values: any[] | null, isAsc: boolean | null = true, property: string | string[] = []): any[]

Paramètres :

• values : Tableau à trier
• isAsc : Ordre croissant (true) ou décroissant (false)
• property : Propriété(s) de tri

DateSortPipe

transform(values: any[] | null, isAsc: boolean | null = true): any[]

Paramètres :

• values : Tableau d'objets avec dates à trier
• isAsc : Ordre croissant (true) ou décroissant (false)

SafePipe

transform(url: string): SafeResourceUrl

Paramètres :

• url : URL à sanitiser

SafeHtmlPipe

transform(html: string): SafeHtml

Paramètres :

• html : Contenu HTML à sanitiser

📝 Notes

• Tous les pipes sont standalone et peuvent être importés individuellement
• Utilise Lodash pour le tri avancé dans SortPipe
• Les pipes de sécurité utilisent le DomSanitizer d'Angular
• Compatible avec Angular 16+

📄 Licence

MIT © CHRV Components