Pour cette exigence, j'implémente et publie un composant générique . Voir
https://www.npmjs.com/package/w-ng5
Pour utiliser ces composants, avant, installez ce package avec npm:
npm install w-ng5 --save
Après, importez le module dans app.module
...
import { PipesModule } from 'w-ng5';
À l'étape suivante, ajoutez la section declare de app.module:
imports: [
PipesModule,
...
]
Exemple d'utilisation
Filtrage d'une chaîne simple
<input type="text" [(ngModel)]="filtroString">
<ul>
<li *ngFor="let s of getStrings() | filter:filtroString">
{{s}}
</li>
</ul>
Filtrage d'une chaîne complexe - champ 'Valeur' au niveau 2
<input type="text" [(ngModel)]="search">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
Filtrage d'une chaîne complexe - champ central - «Valeur» au niveau 1
<input type="text" [(ngModel)]="search3">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
Filtrage d'un tableau complexe simple - champ 'Nome' niveau 0
<input type="text" [(ngModel)]="search2">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
Filtrage dans les champs de l'arborescence - champ 'Valor' au niveau 2 ou 'Valor' au niveau 1 ou 'Nome' au niveau 0
<input type="text" [(ngModel)]="search5">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
Filtrage d'un champ inexistant - «Valor» dans un niveau 3 inexistant
<input type="text" [(ngModel)]="search4">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
Ce composant fonctionne avec un niveau d'attribut infini ...
<div *ngFor="let item of itemsList" *ngIf="conditon(item)" ...