How to show/hide dropdownlist with Material angular

Question

So I am using angular 8. And I have two dropdownlists. ONe with already populated data in it. And one with data that is coming from a server. But now I want to hide the one with the already populated data if the dropdown is shown with the selected data coming from the server.

With the selected data

      <div  class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
        <mat-select placeholder="Opties" name="option"  [(ngModel)] = "selectedValue" >
          <mat-option  *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" >
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

Witht the populated data from the server:

      <div   class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
      <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" (click)="getQrCodes()"  >
        <mat-option  *ngFor="let option of returnQrCodes$ | async " value="option.value" >
          {{ option.qrCode }}
        </mat-option>
      </mat-select>
    </div>

And I have a function that checks with option is selected:

 searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.filerByRegistration();
    }

    if (this.selectedSearch === 'Chat') {
      this.filterByChat();
    }
    if (this.selectedSearch === 'Inlog') {
      this.filterByInlog();
    }

    if (this.selectedSearch === 'QrCode') {
      this.filterByQrCodes();
    }

    if (this.selectedSearch === 'Doelen') {
      this.filerByChallenge();
    }
  }

Of course this has to be refactored. But that is for later case.

So when the option QrCode is selected the With the selected data dropdownlist has to be hidden and also vice versa. So when the option Doelen will be selected the Dropdownlist with the data from the server has to be hidden.

But how to archieve this?

THank you

Answer 1

You can set a boolean to show/hide the dropdown.

showDropdown:boolean = false

searchFor() {
    this.showDropdown = false;

    if (this.selectedSearch === 'Registratie') {
      this.filerByRegistration();
    }
    ...
}

filerByRegistration(){
  ...
  // after data is fetched
  this.showDropdown = true;
}

Template:

<div class="search-select searchoptions" *ngIf="showDropdown && selectedSearch && hasOtherOptions(selectedSearch)">
  <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" 
    ...
  </mat-select>
</div>