title: ngx-mat-select-search is not loading the data in dropdown after init
body: <p>Reference used:
  <a href="https://stackblitz.com/edit/github-yn8zve-xl2vcs?file=src%2Fapp%2Fexamples%2F01-single-selection-example%2Fsingle-selection-example.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/github-yn8zve-xl2vcs?file=src%2Fapp%2Fexamples%2F01-single-selection-example%2Fsingle-selection-example.component.ts</a></p>
  <p>Values are loaded into countrydropdown but after I am clicking it for first time . After that all is working fine . only concern is value not loading at the page loads .</p>
  <p>here is the typescript:</p>
  <pre><code>ngOnInit(): void {
    this.orgNameSearchInit();
    this.getCountryCodes();
  
    // load the initial bank list
    console.log(&quot;inside nginit &quot;)
    this.countryArrFilterDropdown.next(this.countryArray.slice());
  
    //to listen any change in search box
    this.searchFormControl.valueChanges
    .pipe(takeUntil(this._onDestroy))
    .subscribe(() =&gt; {
      this.filterCodes();
    });
  
  }
  
  protected filterCodes() {
    if (!this.countryArray) {
      return;
    }
    // get the search keyword
    let search = this.searchFormControl.value;
    console.log(&quot;searched value: &quot;+ search);
    if (!search) {
      console.log(this.countryArrFilterDropdown.next(this.countryArray.slice()));
      this.countryArrFilterDropdown.next(this.countryArray.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
    console.log(&quot;after ifelse&quot;);
    // filter the Country
    this.countryArrFilterDropdown.next(
      this.countryArray.filter((countrys) =&gt; countrys.countryName.toLowerCase().indexOf(search) &gt; -1)
      // this.banks.filter((bank) =&gt; bank.name.toLowerCase().indexOf(search) &gt; -1)
    );
  }
  
  ngAfterViewInit(): void {
   this.setInitialValue();}
  </code></pre>
  <p>here is the html :</p>
  <pre><code>&lt;div class=&quot;col-sm-2&quot;&gt;
                  &lt;mat-form-field&gt;
                      &lt;mat-select [formControl]=&quot;testFormControl&quot; placeholder=&quot;Code&quot; #singleSelect&gt;
                          &lt;mat-option&gt;
                              &lt;ngx-mat-select-search [formControl]=&quot;searchFormControl&quot; placeholderLabel=&quot;Search&quot;&gt;&lt;/ngx-mat-select-search&gt;
                          &lt;/mat-option&gt;
                          
                          &lt;mat-option *ngFor=&quot;let countryArrFilterDropdowns of countryArrFilterDropdown | async&quot;
                              [value]=&quot;countryArrFilterDropdowns.countryCode&quot;&gt;
                          {{countryArrFilterDropdowns.countryName}}
                          &lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  </code></pre>