angular - Filter in dropdown (MatSelect) not working with data from Http get request

Question

I have created a simple Angular app using Angular Material with an input field and a select.

In my select I am accessing data using HTTP get request from accountdetails.json which is placed in my assets folder.

I have applied search filter for the select, but when i type the required option, the list does not get filtered.

account.component.ts:

import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import { AccountdetailService } from '../accountdetail.service';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']
 })
export class AccountComponent implements OnInit {

 filtertext: string;
 departments: any;
 acc_id='': number;

constructor( private accdetailservice: AccountdetailService ) { }


  /* Table Starts here
  ---------------------- */

 displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
 dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);


applyFilter(filterValue: any) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource1.filter = filterValue;
  }


ngOnInit(){
  this.accdetailservice.accountdetails()
  .subscribe(data => {
     this.departments = data;
     // Add this row
     this.dataSource1.data = data;
  });
}


  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  }

    @ViewChild('form') form;
    reset() {
    this.form.nativeElement.reset()
  }
         }

const ELEMENT_DATA: Element[] = [];

account.component.html:

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<form #form>      
<table>
    <tr><td> Account ID</td>
<td>
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Account ID" [(value)]="acc_id">
    </mat-form-field><br/>
</td>

&emsp;&emsp;&emsp;&emsp;
<td>Department</td>
<td>
    <mat-form-field>
        <mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department">
                      <input class="input1" matInput type="text" [(ngModel)]="filtertext"       (keyup)="applyFilter($event.target.value)">
                        <mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
</td></tr>
</table>
</form>
 <br/><br/>
 <button mat-raised-button color="primary" (click)="reset()">Reset </button>

<!-- Table starts here -->

<mat-card>
<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="acc_des">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_des}} </mat-cell>
    </ng-container>

    <!-- Investigator Column -->
    <ng-container matColumnDef="investigator">
      <mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell>
    </ng-container>

    <!-- Account CPC Column -->
    <ng-container matColumnDef="CPC">
      <mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.CPC}}</mat-cell>
    </ng-container>

     <!-- Location Column -->
    <ng-container matColumnDef="location">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.location}}</mat-cell>
       </ng-container>


     <!-- Client Dept ID Column -->
    <ng-container matColumnDef="dept_id">
      <mat-header-cell *matHeaderCellDef> DeptID </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.dept_id}}</mat-cell>
       </ng-container>


    <!-- Dept Description Column -->
    <ng-container matColumnDef="deptdesc">
      <mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.deptdesc}}</mat-cell>
       </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns1;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>
</mat-card>

filter.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(departments1: any, filtertext: string) {
    if(filtertext=== undefined){
    return departments1;
    } else if(departments1)
    {
         return departments1.filter(function(department){
         return department.value.toLowerCase().includes(filtertext.toLowerCase());

         })   
    } }}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';

import { AppMaterialModule } from './app-material.module';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account/account.component';

import { AccountdetailService } from './accountdetail.service';



import './rxjs-operators';


@NgModule({
  declarations: [
    AppComponent,
    AccountComponent ,
    FilterPipe      
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppMaterialModule,
    FormsModule ,
    HttpModule   
  ],
  providers: [ AccountdetailService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lastly, I have applied a reset button for the form. The Account ID input gets reset after i click the Reset button, but the Department select field doesn't reset.

Answer 1

Waitting for answers