app.component.html

    <p>Select City:<br/></p>
    <select (change)="changedValue($event.target.value)">
        <option *ngFor="let bank of bankList" [value]="bank.name">
          {{bank.name}}
        </option>
      </select>
  <mat-form-field class='textFilter'>
    <input matInput (keyup)="applyFilter($event.target.value)" 
    placeholder="Filter">
  </mat-form-field>


<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
  
        <!-- IFSC Column -->
        <ng-container matColumnDef="ifsc">
          <th mat-header-cell *matHeaderCellDef>IFSC Code </th>
          <td mat-cell *matCellDef="let element"> {{element.ifsc}} </td>
        </ng-container>
        
        <!-- Bank_id Column -->
        <ng-container matColumnDef="bank_id">
          <th mat-header-cell *matHeaderCellDef>Bank Id </th>
          <td mat-cell *matCellDef="let element"> {{element.bank_id}} </td>
        </ng-container>
      
        <!-- Branch Column -->
        <ng-container matColumnDef="branch">
          <th mat-header-cell *matHeaderCellDef> Branch </th>
          <td mat-cell *matCellDef="let element"> {{element.branch}} </td>
        </ng-container>
      
        <!-- Address Column -->
        <ng-container matColumnDef="address">
          <th mat-header-cell *matHeaderCellDef> Address </th>
          <td mat-cell *matCellDef="let element"> {{element.address}} </td>
        </ng-container>
      
        <!-- City Column -->
        <ng-container matColumnDef="city">
          <th mat-header-cell *matHeaderCellDef>City </th>
          <td mat-cell *matCellDef="let element"> {{element.city}} </td>
        </ng-container>
      
        <!-- District Column -->
        <ng-container matColumnDef="district">
          <th mat-header-cell *matHeaderCellDef> District </th>
          <td mat-cell *matCellDef="let element"> {{element.district}} </td>
        </ng-container>
        
        <!-- State Column -->
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>State </th>
          <td mat-cell *matCellDef="let element"> {{element.state}} </td>
        </ng-container>
      
        <!-- Bank Name Column -->
        <ng-container matColumnDef="bank_name">
          <th mat-header-cell *matHeaderCellDef> Bank Name </th>
          <td mat-cell *matCellDef="let element"> {{element.bank_name}} </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </mat-table>
      <mat-paginator #paginator
              [length]="10"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>
      </div>