Natuurlijk! Hier is een stapsgewijze uitleg over het maken van een geavanceerde Angular pipe die getallen afrondt op 2 decimalen en negatieve waarden filtert. **1. Maak een nieuwe pipe aan** Gebruik Angular CLI of handmatig: ```bash ng generate pipe advancedFilter ``` Dit genereert een pipe class, bijvoorbeeld `AdvancedFilterPipe`. **2. Implementeer de logica in de pipe** Open de `advanced-filter.pipe.ts` en pas het aan: ```typescript import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'advancedFilter' }) export class AdvancedFilterPipe implements PipeTransform { transform(value: number | number[], filterNegatives: boolean = false): number | number[] { if (Array.isArray(value)) { // Filter negatieve waarden indien nodig let filteredValues = filterNegatives ? value.filter(v => v >= 0) : value; // Rond af op 2 decimalen return filteredValues.map(v => this.roundToTwoDecimals(v)); } else { // Enkel één getal if (filterNegatives && value < 0) { return null; // of een andere gewenste waarde } return this.roundToTwoDecimals(value); } } private roundToTwoDecimals(num: number): number { return Math.round(num * 100) / 100; } } ``` **3. Gebruik in een component** Stel dat je een array van getallen hebt: ```typescript export class VoorbeeldComponent { getallen = [12.3456, -7.891, 23.4567, -0.1234, 45.6789]; } ``` In je template: ```html <p>Alle getallen: {{ getallen | advancedFilter }}</p> <p>Alle positieve getallen afgerond: {{ getallen | advancedFilter:true }}</p> ``` **Resultaat:** - Zonder filter: alle getallen, afgerond op 2 decimalen. - Met `true`: alleen niet-negatieve getallen, afgerond. **Aanvullende tips:** - Je kunt extra opties toevoegen, zoals meer filters of formatteringen. - Voor complexere logica kun je overwegen om meerdere pipes te combineren of een service te gebruiken. Heeft je nog verdere vragen of wil je een andere soort data transformeren?

Zeker! Ik help je bij het ontwikkelen van een geavanceerde Angular pipe. Hier is een complete uitleg met voorbeelden. ### Stap 1: Pipe aanmaken Genereer eerst een nieuwe pipe met Angular CLI: ```bash ng generate pipe advanced-transform ``` ### Stap 2: Pipe implementatie ```typescript import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'advancedTransform', pure: false // Optioneel: voor dynamische filtering }) export class AdvancedTransformPipe implements PipeTransform { transform(values: number[], options: { decimalPlaces?: number, filterNegatives?: boolean, filterCondition?: (value: number) => boolean } = {}): any[] { // Standaard opties const config = { decimalPlaces: options.decimalPlaces || 2, filterNegatives: options.filterNegatives || false, filterCondition: options.filterCondition || ((val: number) => true) }; if (!Array.isArray(values)) { return values; } return values .filter(value => { // Filter negatieve waarden indien gevraagd if (config.filterNegatives && value < 0) { return false; } // Aangepaste filterconditie return config.filterCondition(value); }) .map(value => { // Afronden op decimalen return Number(value.toFixed(config.decimalPlaces)); }); } } ``` ### Stap 3: Gebruik in component template ```typescript // component.ts export class MyComponent { numbers = [3.14159, -2.71828, 1.41421, -1.61803, 0.57721]; customFilter = (value: number) => value > 0; // Alleen positieve waarden } ``` ```html <!-- component.html --> <!-- Basis gebruik --> <p>{{ numbers | advancedTransform }}</p> <!-- Output: [3.14, 1.41, 0.58] --> <!-- Met specifieke opties --> <p>{{ numbers | advancedTransform:{decimalPlaces: 3, filterNegatives: true} }}</p> <!-- Output: [3.142, 1.414, 0.577] --> <!-- Met custom filter --> <p>{{ numbers | advancedTransform:{filterCondition: customFilter} }}</p> <!-- Output: [3.14, 1.41, 0.58] --> <!-- In combinatie met *ngFor --> <ul> <li *ngFor="let num of numbers | advancedTransform:{decimalPlaces: 1}"> {{ num }} </li> </ul> <!-- Output: 3.1, 1.4, 0.6 --> ``` ### Stap 4: Geavanceerde features toevoegen Voor extra functionaliteit kun je de pipe uitbreiden: ```typescript transform(values: number[], options: any = {}): any[] { // ... bestaande code ... // Sorteren optie toevoegen if (options.sort) { result = result.sort((a, b) => options.sort === 'asc' ? a - b : b - a); } // Limiet optie toevoegen if (options.limit) { result = result.slice(0, options.limit); } return result; } ``` ### Gebruik met geavanceerde opties: ```html {{ numbers | advancedTransform:{decimalPlaces: 2, filterNegatives: true, sort: 'asc', limit: 2} }} ``` ### Stap 5: Module registratie Vergeet niet de pipe te registreren in je module: ```typescript @NgModule({ declarations: [AdvancedTransformPipe], // ... }) export class AppModule { } ``` ### Belangrijke tips: 1. **Pure vs Impure pipes**: Zet `pure: false` alleen als de data frequent wijzigt 2. **Performance**: Vermijd complexe berekeningen in pipes 3. **Type safety**: Gebruik TypeScript interfaces voor options 4. **Testing**: Schrijf unit tests voor je pipe functionaliteit Deze pipe biedt een flexibele oplossing voor complexe datatransformaties rechtstreeks in je templates!