Angular get and pipe

Помогите решить проблему, есть бд с данными пользователей, и ресурс который их отображает, при вводе в строку поиска любых данных он выводит соответствия, и пустой строке выводит всех, при отсутствии совпадений – пустоту.
Вот написал немного кода, вроде работает, но криво, т.е. не сразу обрабатывает запросы, т.е. если есть номер 200, то реагирует на ввод: 2, 20, 200, 2000 и только при 20000 пишет что нет такого. Как бы нужно как-то инпут перезаполнять чтобы заново рендерил страницу. Заранее спасибо.

Шаблон:

<div class="row">
  <div>
    <input
      type="text" class="form-control"
      placeholder="enter to find"
      [(ngModel)]="queryString">
  </div>
</div>
<div class="row">
  <div>
    <table class="table">
      <thead>
      <tr>
        <th>phone</th>
        <th>mobile</th>
        <th>owner</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let m of members | findMemder: queryString">
        <td>{{ m.phone }}</td>
        <td>{{ m.mobile }}</td>
        <td>
          {{ m.owner }}
          <br>
          <small>
            <i>
              {{ m.dep }}
            </i>
          </small>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

Сервис:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


export interface DataResponse {
  phone: string;
  mobile: string;
  owner: string;
}

@Injectable()
export class MembersService {

  constructor(private http: HttpClient) {}

  getMembers() {
    return this.http.get('http://localhost/api/test');
  }

}

Пайп:

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MembersService } from './services/members.service';
import { Member } from './phonebook/pb.component';

@Pipe({
  name: 'findMemder'
})
export class FindMemderPipe implements PipeTransform {

  members: Member[];

  constructor(private membersService: MembersService, private httpClient: HttpClient) {}

  transform(value: any, input?: string): any {

    if (input) {
      this.httpClient.get<Member[]>('http://localhost/api/test/' + input).subscribe(data => {
        this.members = data;
      });
      return this.members;
    }
  }
}

Компонент:

import { Component, OnInit } from '@angular/core';
import { MembersService } from '../services/members.service';
import { HttpClient } from '@angular/common/http';

export interface Member {
  phone: string;
  mobile: string;
  owner: string;
}

@Component({
  selector: 'pb',
  templateUrl: './pb.component.html',
  styleUrls: ['./pb.component.css']
})
export class Pb implements OnInit {

  members: Member[];

  constructor(
    private membersService: MembersService,
    private httpClient: HttpClient) {}

  ngOnInit(): void {

    this.httpClient.get<Member[]>('http://localhost/api/test').subscribe(data => {
      this.members = data;
    });
  }
}