error TS2339: Property 'filter' does not exist on type 'Observable<Employee[]>'. in Angular rxjs

Question

I have written a code to filter out searches. I am having an error of error TS2339: Property 'filter' does not exist on type 'Observable<Employee[]>' . Here is how my code looks like.

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs";
import { Router } from '@angular/router';
import { Employee } from '../../employee';
import { EmployeeDetailsComponent } from '../employee-details/employee-details.component';
import { EmployeeService } from "../../services/employee.service";
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees: Observable<Employee[]>; 
  displayedColumns: string[] = ['name', 'dob', 'email', 'actions'];
  searchKey: string;

  constructor(private employeeService: EmployeeService, private router: Router) { }

  ngOnInit() {
    this.reloadAllEmployees();
  }

  reloadAllEmployees(){
    this.employees = this.employeeService.getEmployeesList()
  }

  onSearchClear(){
    this.searchKey="";
  }

  applyFilter(){
    this.employees.filter = this.searchKey.trim().toLowerCase();
  }

}

Below is my html file code part related to this.

  <mat-form-field class="search-form-field" floatLabel="never">
    <input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
    <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchKey"  (click)="onSearchClear()">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>

I use Angular 8 and rxjs 6.4.0.

Please help me to solve this issue.

Answer 1

Assuming that you want to show filtered employee data in the UI and getEmployeesList will be returning an observable, you can try the below approch.

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs";
import { Router } from '@angular/router';
import { Employee } from '../../employee';
import { EmployeeDetailsComponent } from '../employee-details/employee-details.component';
import { EmployeeService } from "../../services/employee.service";
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees: Employee[]; 
  filteredEmployees: Employee[]; 
  displayedColumns: string[] = ['name', 'dob', 'email', 'actions'];
  searchKey: string;

  constructor(private employeeService: EmployeeService, private router: Router) { }

  ngOnInit() {
    this.reloadAllEmployees();
  }

  reloadAllEmployees(){
    this.employeeService.getEmployeesList()
    .subscribe(res=>{
        this.employees = res;
        this.filteredEmployees= res;
    });
  }

  onSearchClear(){
    this.searchKey="";
    this.filteredEmployees = this.employees;
  }

  applyFilter(){
    this.filteredEmployees = this.employees.filter(x=>x.someKey === this.searchKey.trim().toLowerCase());
  }

}

You'll have to subscribe to the getEmployeesList function and fix filter logic also.