Данные таблицы фильтрации в Angular 4 при нажатии на кнопку Seach без трубы фильтра

Question

Я новичок в angular 4, для целей обучения я делаю одно упражнение.У меня есть одна таблица с данными, которая содержит два поля (адрес электронной почты, идентификатор).Чего я пытаюсь добиться, если пользователь вводит идентификационный номер или адрес электронной почты и нажимает кнопку поиска, тогда данные таблицы должны обновляться с использованием отфильтрованных / найденных данных, а старые данные таблицы должны исчезать.

Пример: если пользователь вводит идентификатор (500601) и нажмите на кнопку поиска, тогда у меня должна быть таблица согласно приложенному снимку экрана ниже:

Пожалуйста, проверьте прикрепленный снимок экрана.Я создал один компонент, app-search:

//search.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  email: any = '';
  id: any = '';
  users = [
    {
      id: '500601',
      email: 'abc@example.com'
    }, {
      id: '500602',
      email: 'xyz@example.com'
    }, 
    {
      id: '500603',
      email: 'jsgsbh@example.com'
    }, {
      id: '500604',
      email: 'test1@example.com'
    },
    {
      id: '500605',
      email: 'test2@example.com'
    },
    {
      id: '500606',
      email: 'test3@example.com'
    }
  ];                      
  tempId: any = '';
  tempEmail: any = '';
  constructor() { }

  ngOnInit() {

  }

  search() {
    let me = this;
    // take the user input value
    let idFieldVaue: any = ((document.getElementById("id") as HTMLInputElement).value);
    //console.log(idFieldVaue);
    let emailFieldVaue: any = ((document.getElementById("email") as HTMLInputElement).value);
    //console.log(emailFieldVaue);

    // if match then push that value in users array
    me.users.forEach(element => {
      me.tempId = element.id;
      me.tempEmail = element.email;
      if((me.tempId === idFieldVaue) || (me.tempEmail === idFieldVaue)) {
        me.users = [];
        me.users.push(me.tempId);
        me.users.push(me.tempEmail)
        console.log(me.users['id']);
      }           
    });
  }
}

Что я пробовал:

1. принять значение пользовательского ввода

2. , если совпадение вЗатем массив пользователей обновляет массив пользователей

   // search.component.html

   Идентификатор клиента Идентификатор электронной почты для поиска электронной почты клиента {{customer.id}} {{customer.email}}

Я пытаюсь выполнить это упражнение без углового 4-х трубного фильтра.Я пробовал несколько решений, но до сих пор не дал результата.Я пробовал также ссылки ниже:

Угловая 4 Фильтрация при нажатии кнопки

Таблица угловых фильтров с использованием пользовательской трубы при нажатии кнопки

Пожалуйста, поделитесь своим предложением или своим мнением.