TIL: How to use async pipe and populate mat-select

#angular #todayilearned

I was trying to use async | pipe directly on the view to get all the country list and populate my mat-select dropdown. The countrySelector component has a countryList$ observable which gets all the country from a service like so:

 ...
  ngOnInit(): void {
    this.countryList$ = this.countryService.getCountries();
  }
 ...

Then in my view, I use ng-container with an *ngIf clause to check if the country list is available.

<ng-container *ngIf="countryList$ | async as countryList">

I then use the countryList and populate the mat-select which uses *ngFor to go through the list of countries and add a mat-option for each of the item. It also has a poperty onSelectionChange which fires an event when a selection is changed. My final view will look something like this:

<ng-container *ngIf="countryList$ | async as countryList">
 <mat-select>
  <mat-option *ngFor=" let country of countryList 
     [value]="country"
     (onSelectionChange)="changeCurrentSelection($event, 
     country)">                  
    {{country.name}}
  </mat-option>
 </mat-select>
</ng-container>