Not able to display mat-select with an initial value using Search filter in dropdown

Question

I am trying to implement search filter in MatSelect drop down in angular2 or later using Angular material and Ng2SearchPipeModule but I am facing some issue.I need

1. by default show the first element in select tag
2. When I search anything in search box it should filter out
3. If I dont select anything in matselect after searching anyhting in searchbox the previously selected option should be visible in Matdropdown when I close dropdown .

Now my search filter is working fine also when i load my page first time I am able to see the first element by default visible in Matselect.

But when I search anything in searchbox and then close the drop down my matselect will be blank and after that when I again open my matselect dropdown menu the search box still have the text .Also I dont have any error in console .

So I want that when I search anything and do not select any dropdown it should have the previously selected menu and when i close and reopen my dropdown menu search box should be clear

component.html'

  <mat-form-field>
          <mat-select [(ngModel)]="myValue">
              <input type="text" [(ngModel)]="term">
              <mat-option *ngFor="let o of allValues  | filter:myValue" 
              value="{{o.name}}">

            {{o.name}}{{o.id}}
            </mat-option>
          </mat-select>
     </mat-form-field>

          <p> Selected value: {{myValue}} </p>

component.ts

term=''

  AllValues =[{
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }]

  allValues = this.AllValues;

  myValue: any = this.AllValues[0].name 

But here the problem is in last image which shows empty results

Answer 1

Taking the references from https://stackblitz.com/edit/mat-select-search?file=app%2Fapp.component.html and then analyzing your question I modified the code and made simpler for you

component.html

<mat-form-field>
      <mat-select [formControl]="bankCtrl" placeholder="Bank" >
        <mat-select-search [formControl] ="bankFilterCtrl"  [(ngModel)]="term"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanks | async | filter:term" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

component.ts

export class AppComponent implements OnInit{ 

  public bankCtrl: FormControl = new FormControl();
  public bankFilterCtrl: FormControl = new FormControl();
 public filteredBanks: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);


  private banks  = [
   {
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }
  ]


term='';


  ngOnInit() {
    // set initial selection
    this.bankCtrl.setValue(this.banks[1]);

    // load the initial bank list
    this.filteredBanks.next(this.banks.slice());


  }
}

Check this out and let me know!!