add filter by dropdown

AngularApp/src/app/exercise-student/exercise-student.component.html

@@ -6,10 +6,12 @@
                 <p class="card-category"> Technique de compilation</p>
             </div>
             <div class="card-body">
-                <mat-form-field appearance="standard">
+                <!-- Filter with input text -->
+                <!-- <mat-form-field appearance="standard">
                     <mat-label>Filter</mat-label>
                     <input matInput (keyup)="applyFilter($event)" placeholder="Search columns" #input>
                 </mat-form-field>
+
                 <table mat-table [dataSource]="dataSource" class="table">
                     <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                         <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
@@ -18,6 +20,27 @@
                     
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let emprow; columns: displayedColumns"></tr>
+                </table> -->
+                
+                <!-- Filter by dropdown -->
+                <mat-form-field appearance="fill" *ngFor="let empfilter of empFilters">
+                    <mat-label>{{empfilter.name}}</mat-label>
+                    <mat-select [(value)]="empfilter.defaultValue" (selectionChange)="applyEmpFilter($event,empfilter)">
+                      <mat-option *ngFor="let op of empfilter.options" [value]="op">
+                        {{op}}
+                      </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                
+                <table mat-table [dataSource]="dataSourceFilters" class="table">
+                    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
+                        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+                        <td mat-cell *matCellDef="let emp"> {{emp[column]}} </td>
+                    </ng-container>
+                
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let emprow; columns: displayedColumns;"></tr>
+                
                 </table>
             </div>
         </div>

AngularApp/src/app/exercise-student/exercise-student.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table'
 import { Employee, EmpFilter } from '../model/employees'
+import { MatSelectChange } from '@angular/material/select';
 
 
 @Component({
@@ -11,98 +12,174 @@ import { Employee, EmpFilter } from '../model/employees'
 
 export class ExerciseStudentComponent implements OnInit {
   
-  constructor() { }
-  displayedColumns: string[] = ['Id', 'FirstName', 'LastName', 'Email','Gender','JobTitle'];
-  genders: string[]=['All','Male','Female'];
-  jobtitles: string[]=['All','Support Analyst','Project Manager','Senior officer','Software Engineer'];
-  departments: string[]=['All','Support','Human Resources','Marketing','Engineering'];
-  empFilters: EmpFilter[]=[];
-  defaultValue = "All";
-  EmpData : Employee[] =[{
-    "Id": 1,
-    "FirstName": "Johannah",
-    "LastName": "Kiffin",
-    "Email": "jkiffin0@google.pl",
-    "Gender": "F",
-    "JobTitle": "Administrative Assistant I"
-  }, {
-    "Id": 2,
-    "FirstName": "Eldin",
-    "LastName": "Astbery",
-    "Email": "eastbery1@geocities.jp",
-    "Gender": "M",
-    "JobTitle": "Senior Editor"
-  }, {
-    "Id": 3,
-    "FirstName": "Nahum",
-    "LastName": "Mounce",
-    "Email": "nmounce2@vk.com",
-    "Gender": "M",
-    "JobTitle": "Programmer II"
-  }, {
-    "Id": 4,
-    "FirstName": "Gallard",
-    "LastName": "Standell",
-    "Email": "gstandell3@europa.eu",
-    "Gender": "M",
-    "JobTitle": "Account Representative II"
-  }, {
-    "Id": 5,
-    "FirstName": "Koenraad",
-    "LastName": "Domleo",
-    "Email": "kdomleo4@cornell.edu",
-    "Gender": "M",
-    "JobTitle": "Quality Control Specialist"
-  }, {
-    "Id": 6,
-    "FirstName": "Uriah",
-    "LastName": "Turbat",
-    "Email": "uturbat5@aol.com",
-    "Gender": "M",
-    "JobTitle": "Accounting Assistant II"
-  }, {
-    "Id": 7,
-    "FirstName": "Waldemar",
-    "LastName": "Fowley",
-    "Email": "wfowley6@sun.com",
-    "Gender": "M",
-    "JobTitle": "Account Coordinator"
-  }, {
-    "Id": 8,
-    "FirstName": "Rodolfo",
-    "LastName": "Trenchard",
-    "Email": "rtrenchard7@yandex.ru",
-    "Gender": "M",
-    "JobTitle": "Data Coordiator"
-  }, {
-    "Id": 9,
-    "FirstName": "Konstance",
-    "LastName": "Dudek",
-    "Email": "kdudek8@techcrunch.com",
-    "Gender": "F",
-    "JobTitle": "Administrative Assistant I"
-  }, {
-    "Id": 10,
-    "FirstName": "Monti",
-    "LastName": "Perton",
-    "Email": "mperton9@youtube.com",
-    "Gender": "M",
-    "JobTitle": "Operator"
-  }];
-  
+  displayedColumns: string[] = [
+    'id',
+    'firstname',
+    'lastname',
+    'email',
+    'gender',
+    'jobtitle',
+    'department',
+  ];
+
+  EmpData: Employee[] = [
+    {
+      id: 1,
+      firstname: 'Mellie',
+      lastname: 'Gabbott',
+      email: 'mgabbott0@indiatimes.com',
+      gender: 'Female',
+      department: 'Support',
+      jobtitle: 'Support Analyst',
+    },
+    {
+      id: 2,
+      firstname: 'Yehudi',
+      lastname: 'Ainsby',
+      email: 'yainsby1@w3.org',
+      gender: 'Female',
+      department: 'Support',
+      jobtitle: 'Support Analyst',
+    },
+    {
+      id: 3,
+      firstname: 'Noellyn',
+      lastname: 'Primett',
+      email: 'nprimett2@ning.com',
+      gender: 'Female',
+      department: 'Human Resources',
+      jobtitle: 'Project Manager',
+    },
+    {
+      id: 4,
+      firstname: 'Stefanie',
+      lastname: 'Yurenin',
+      email: 'syurenin3@boston.com',
+      gender: 'Female',
+      department: 'Marketing',
+      jobtitle: 'Senior officer',
+    },
+    {
+      id: 5,
+      firstname: 'Stormi',
+      lastname: "O'Lunny",
+      email: 'solunny4@patch.com',
+      gender: 'Female',
+      department: 'Engineering',
+      jobtitle: 'Software Engineer',
+    },
+    {
+      id: 6,
+      firstname: 'Keelia',
+      lastname: 'Giraudy',
+      email: 'kgiraudy5@nba.com',
+      gender: 'Male',
+      department: 'Marketing',
+      jobtitle: 'Senior officer',
+    },
+    {
+      id: 7,
+      firstname: 'Ikey',
+      lastname: 'Laight',
+      email: 'ilaight6@wiley.com',
+      gender: 'Male',
+      department: 'Support',
+      jobtitle: 'Support Analyst',
+    },
+    {
+      id: 8,
+      firstname: 'Adrianna',
+      lastname: 'Ruddom',
+      email: 'aruddom7@seattletimes.com',
+      gender: 'Male',
+      department: 'Marketing',
+      jobtitle: 'Senior officer',
+    },
+    {
+      id: 9,
+      firstname: 'Dionysus',
+      lastname: 'McCory',
+      email: 'dmccory8@ox.ac.uk',
+      gender: 'Male',
+      department: 'Engineering',
+      jobtitle: 'Software Engineer',
+    },
+    {
+      id: 10,
+      firstname: 'Claybourne',
+      lastname: 'Shellard',
+      email: 'cshellard9@rediff.com',
+      gender: 'Male',
+      department: 'Engineering',
+      jobtitle: 'Software Engineer',
+    },
+  ];
+
+  genders: string[] = ['All', 'Male', 'Female'];
+  jobtitles: string[] = [
+    'All',
+    'Support Analyst',
+    'Project Manager',
+    'Senior officer',
+    'Software Engineer',
+  ];
+  departments: string[] = [
+    'All',
+    'Support',
+    'Human Resources',
+    'Marketing',
+    'Engineering',
+  ];
+  empFilters: EmpFilter[] = [];
+
+  defaultValue = 'All';
+
+  filterDictionary = new Map<string, string>();
+
   dataSource = new MatTableDataSource(this.EmpData);
-  
+  dataSourceFilters = new MatTableDataSource(this.EmpData);
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.empFilters.push({
+      name: 'gender',
+      options: this.genders,
+      defaultValue: this.defaultValue,
+    });
+    this.empFilters.push({
+      name: 'jobtitle',
+      options: this.jobtitles,
+      defaultValue: this.defaultValue,
+    });
+    this.empFilters.push({
+      name: 'department',
+      options: this.departments,
+      defaultValue: this.defaultValue,
+    });
+
+    this.dataSourceFilters.filterPredicate = function (record, filter) {
+      debugger;
+      var map = new Map(JSON.parse(filter));
+      let isMatch = false;
+      for (let [key, value] of map) {
+        isMatch = value == 'All' || record[key as keyof Employee] == value;
+        if (!isMatch) return false;
+      }
+      return isMatch;
+    };
+  }
+
+  applyEmpFilter(ob: MatSelectChange, empfilter: EmpFilter) {
+    this.filterDictionary.set(empfilter.name, ob.value);
+    var jsonString = JSON.stringify(
+      Array.from(this.filterDictionary.entries())
+    );
+    this.dataSourceFilters.filter = jsonString;
+  }
+
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
-  
-  ngOnInit(): void {
-    this.dataSource.filterPredicate = function (record,filter) {
-      return record.Gender.toLocaleLowerCase() == filter.toLocaleLowerCase();
-    }
-    this.empFilters.push({name:'gender',options:this.genders,defaultValue:this.defaultValue});
-    this.empFilters.push({name:'jobtitle',options:this.jobtitles,defaultValue:this.defaultValue});
-    this.empFilters.push({name:'department',options:this.departments,defaultValue:this.defaultValue});
-  }
 }

AngularApp/src/app/model/employees.ts

 export interface Employee {
-    Id : number,	
-    FirstName:string,	
-    LastName:string,	
-    Email:string,
-    Gender:string,	
-    JobTitle:string
+    id : number,	
+    firstname:string,	
+    lastname:string,	
+    email:string,
+    gender:string,
+    department:string,
+    jobtitle:string
 }
 
 export interface EmpFilter {