angular - Display employee in specific department foreign key

Question

I'm building a web app using Angular + Typescript. And I have ASP.NET Core Web API, I have two components one is employee and another is department. I want to make a dropdown so if I select for example IT department, I got all employee in this department. I declared department as a foreign key in employee table.

Html Code

<div class="example-button-row">
    <mat-label>{{'::Departement' | abpLocalization}}</mat-label>
    <mat-select id="author-id" Name="departementId" autofocus (selectionChange)="showemployee($event.value)">
      <mat-option [value]="departement.id" *ngFor="let departement of departements$ | async">{{ departement.name }}</mat-option>
    </mat-select>
</div>

Typescript:

export class EmployeeComponent implements OnInit {
    departements$: Observable<DepartementLookupDto[]>; 
    constructor( public readonly list: ListService,
        private employeeService: EmployeeService) {this.departements$ = employeeService.getDepartementLookup().pipe(map((r) => r.items));
}

Answer 1

You can call endpoint for getting employee and the use FILTER on the resoult.

showemployee(filter:string)
{
  this.employeeService.getEmployee().subscribe(res=>
  {
     this.listOfEmloyee = res.filter(u => u.department == 'filter')
  })
}