Filter from front end

    <div class="sort">
      <button mat-raised-button color="primary" [matMenuTriggerFor]="menuOrder">
        <!--        Payment Type-->
        {{phoneList[activeFilter9]?.viewValue ? phoneList[activeFilter9]?.viewValue : 'Phone number'}}
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #menuOrder="matMenu">
        <button *ngFor="let data of phoneList; let i = index" mat-menu-item
                (click)="filterData(data.value, i, 'phoneNo')"
                [class.dropdown-active]="activeFilter9 === i">
          {{data.viewValue}}
        </button>
      </mat-menu>
    </div>

  activeFilter9: number = null;

  phoneList: any[] = [
    { id: 0, value: '1600000000', viewValue: '1600000000' },
    { id: 1, value: '3317527224', viewValue: '3317527224' },
  ];

  private getAllOrders() {
    this.spinner.show();
    const pagination: Pagination = {
      pageSize: Number(this.ordersPerPage),
      currentPage: Number(this.currentPage) - 1,
    };

    // FilterData
    // const mQuery = this.filter.length > 0 ? {$and: this.filter} : null;

    // Select
    const mSelect = {
      name: 1,
      orderId: 1,
      phoneNo: 1,
      area: 1,
    };

    const filterData: FilterData = {
      pagination: pagination,
      filter: this.filter,
      select: mSelect,
      sort: this.sortQuery,
    };

    this.subDataOne = this.orderService
      .getAllOrders(filterData, this.searchQuery)
      .subscribe(
        (res) => {
          this.spinner.hide();
          this.orders = res.data;

          if (this.orders && this.orders.length) {
            this.orders.forEach((m, i) => {
              const index = this.selectedIds.findIndex((f) => f === m._id);
              this.orders[i].select = index !== -1;
            });

            this.totalOrders = res.count;
            if (!this.searchQuery) {
              this.holdPrevData = res.data;
              this.totalOrdersStore = res.count;
            }

            this.checkSelectionData();
          }
        },
        (error) => {
          this.spinner.hide();
          console.log(error);
        }
      );
  }

  filterData(value: any, index: number, type: string) {
    switch (type) {
      case 'phoneNo': {
        this.filter = { ...this.filter, ...{ phoneNo: value } };
        this.activeFilter9 = index;
        break;
      }
      case 'area': {
        this.filter = { ...this.filter, ...{ area: value } };
        this.activeFilter4 = index;
        break;
      }
      default: {
        break;
      }
    }
    // Re fetch Data

    if (this.currentPage > 1) {
      this.router.navigate([], { queryParams: { page: 1 } });
    } else {
      this.getAllOrders();
    }
  }


  onRemoveAllQuery() {
    this.activeSort = null;
    this.activeFilter1 = null;
    this.activeFilter9 = null;
    this.sortQuery = { createdAt: -1 };
    this.filter = null;
    this.dataFormDateRange.reset();
    // Re fetch Data
    if (this.currentPage > 1) {
      this.router.navigate([], { queryParams: { page: 1 } });
    } else {
      this.getAllOrders();
    }
  }