Refresh datalist in view after user finishes typing in textbox Angular 7

I am trying to refresh a datalist in the view after waiting for user to finish typing in the textbox and updating results. Tried with angular directives, tried with Observable and various timeouts and debounces and no luck. I ran out of options.

In the html file:

            <input type="text" class="form-control" id="Other"  
            (keyup)="onKeySearch($event)" list="dynamicList" formControlName="Other"/>

            <datalist id="dynamicList">
                <option *ngFor="let employee of employeesList" [value]="employee.Name">
                    </option>
            </datalist>

in the .ts file:

  public employeesList: EmployeeData[] = [];

  timeout: any = null;

  getEmployeesList(name : string) {
      let empList: EmployeeData[] = [];

      // get employees list from service 
      this.employeeService.getEmployeesList(name).subscribe((data: any) => {
        empList = data;
        console.log(empList)
      })
      return empList;
    }

  public onKeySearch(event: any) {
    let empListt: EmployeeData[] = [];

    clearTimeout(this.timeout);
    var $this = this;
    this.timeout = setTimeout(() => {
        empListt = $this.getEmployeesList(event.target.value);
        console.log(empListt)
    }, 1000);
    this.employeesList = empListt;
  }

The problem is that the datalist is not updates after retrieving the data an populating the list. After it exists the method the list is again empty, thus no data to display.