My select doesn't update when I send new code via typescript using angular material

Question

I have a problem with my form where it doesn't update the select option the rest it does update.

for the select, I have an array of all the country's in the world like most forms have.

I have tried the ChangeDetectorRef and on change.

            <mat-select [(ngModel)]="site.country" (change)="refresh()" name="country">
              <mat-option *ngFor="let country of countries" [value]="country.code">
                {{ 'COUNTRYLIST.' + country.code | translate }}
              </mat-option>
            </mat-select>

for my typescript i wil explain what i did for security isue

I have a class that has all the input field for an address and I load it from an API I got a google map click event that it would input the form for the user the problem is that it doesn't update the options automatically only when I click on a form field or I scroll on the map or angular automatic updated the dom. sometimes the placeholder also doesn't go up.

I expect that when I click on the map that it automatically updates the option field not when I do an extra action.

a video to explain a bit more what I mean

https://gyazo.com/1c2361abf7beaf43ba06536b91500389

Answer 1

TRY THIS

 <mat-select [(ngModel)]="site.country"  [(value)]="site.country"(change)="refresh()" name="country">
     <mat-option *ngFor="let country of countries" [value]="country.code">
           {{ 'COUNTRYLIST.' + country.code | translate }}
     </mat-option>
 </mat-select>

Note: The <mat-select> supports 2-way binding to the value property without the need for Angular forms.