i want just to filter my data table with multiple search , here is my code , i’m working on angular project , is there a solution to filter with multiple value ? Lead , DateFin , Priorite and Statut , i thnik that i can use switch for this 4 value . or is there another easier solution please.
this is my data table
dataSource: any = [
{
Ref: '1',
Libelle: 'Ecommerce',
Lead: 'Vector',
Contact: 'Yassine',
DateDebut: '20/02/2021',
DateFin: '20/01/2022',
DateModification: '12/03/2022',
Priorite: 'auth',
Statut: 'conception',
},
{
Ref: '2',
Libelle: 'Transport',
Lead: 'Vector',
Contact: 'Salim',
DateDebut: '20/02/2021',
DateFin: '20/01/2022',
DateModification: '12/03/2022',
Priorite: 'design',
Statut: 'conception',
},
{
Ref: '3',
Libelle: 'Ecole',
Lead: 'Vector',
Contact: 'Yassine',
DateDebut: '10/05/2021',
DateFin: '20/02/2022',
DateModification: '12/03/2022',
Priorite: 'auth',
Statut: 'développement',
},
{
Ref: '4',
Libelle: 'livraison',
Lead: 'Antoine',
Contact: 'Salim',
DateDebut: '10/05/2021',
DateFin: '20/02/2022',
DateModification: '12/03/2022',
Priorite: 'design',
Statut: 'développement',
},
{
Ref: '5',
Libelle: 'Food',
Lead: 'Antoine',
Contact: 'Yassine',
DateDebut: '07/03/2021',
DateFin: '20/02/2022',
DateModification: '10/04/2022',
Priorite: 'design',
Statut: 'conception',
},
{
Ref: '5',
Libelle: 'Food',
Lead: 'Antoine',
Contact: 'Yassine',
DateDebut: '07/03/2021',
DateFin: '20/02/2022',
DateModification: '10/04/2022',
Priorite: 'design',
Statut: 'conception',
},
{
Ref: '5',
Libelle: 'Food',
Lead: 'Antoine',
Contact: 'Yassine',
DateDebut: '07/03/2021',
DateFin: '20/02/2022',
DateModification: '10/04/2022',
Priorite: 'design',
Statut: 'conception',
},
]
this is my filter component
<div class="row m-0 w-100">
<div class="col-md-6 px-1 col-12">
<div class="w-100 form-group">
<div class="CR_FormSelect">
<mat-label>{{ labelLead }}</mat-label>
<mat-form-field class="form-control mb-2">
<mat-select>
<mat-option
*ngFor="let item of dataSource; let i = index"
[value]="item.Lead"
>{{ item.Lead }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<div class="col-md-6 px-1 col-12">
<div class="w-100 form-group">
<div class="CR_FormSelect">
<mat-label>{{ labelDateFin }}</mat-label>
<mat-form-field class="form-control mb-2">
<mat-select>
<mat-option *ngFor="let item of dataSource" [value]="item.DateFin">
{{ item.DateFin }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
<div class="row m-0 w-100">
<div class="col-md-6 px-1 col-12">
<div class="w-100 form-group">
<div class="CR_FormSelect">
<mat-label>{{ labelStatut }}</mat-label>
<mat-form-field class="form-control mb-2">
<mat-select>
<mat-option *ngFor="let item of dataSource" [value]="item.Statut">
{{ item.Statut }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<div class="col-md-6 px-1 col-12">
<div class="w-100 form-group">
<div class="CR_FormSelect">
<mat-label>{{ labelPriorite }}</mat-label>
<mat-form-field class="form-control mb-2">
<mat-select>
<mat-option *ngFor="let item of dataSource" [value]="item.Priorite">
{{ item.Priorite }}</mat-option
>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-12 px-1">
<button
mat-raised-button
class="CR_btn CR_B_act ml-auto d-block"
(click)="showSearchResult($event)"
>
Voir le resultat
</button>
</div>
</div>
here my function
searchAdvanced(value: any) {
this.advancedFiltredData = this.dataSource.filter(
(projet: any) => projet.Lead === value
);
console.log(this.advancedFiltredData);
}