отобразить город на основе выбора страны, используя angular 8, выбор материала (раскрывающийся список)

Question

Я пытаюсь показать раскрывающийся список городов на основе выбора страны с использованием материала angular.

Для этого я написал код ниже. Я добился того же, используя обычные теги select и option, но если я использую mat-select и mat-option, тогда код для меня не работает.

      <mat-form-field class="full-width">
            <mat-select name="cloudString" placeholder="Select API Gateway">
                <mat-option disabled>--- Select API Gateway ---</mat-option>
                <mat-option *ngFor="let country of countries1" [value]="country">
                    <span>
                        <img class="img-responsive" src="assets/images/aws-small.png" />
                    </span>
                    &nbsp;&nbsp;{{ country }}</mat-option>
            </mat-select>

            <mat-select name="cloudString2" *ngIf="country" [(ngModel)]="city" [value]="city">
                <mat-option *ngFor="let city of cities1">{{ city }}</mat-option>                        
            </mat-select>                    
        </mat-form-field>

Я следовал приведенному ниже примеру. Это мое точное требование. https://stackblitz.com/edit/dropdown-based-on-dropdown?file=app%2Fapp.component.html

Этот пример работает нормально, но когда я реализую его, используя материал, 2-й выпадающий список не появляется при выборе первого выпадающего списка.

Может кто-нибудь помочь мне в этом выпуске?

Спасибо.