[Fixed] <mat-select> selected value setting but it is not showing


I have a parent component like this .

         <form [formGroup]="validateFormGroup">
              <input matInput placeholder="Name" maxlength="150" formControlName="name" required>
          <div class="">
            <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones>

and in the app-calendar-time-zones component this is my HTML code I have

    <div class="calendar-container">
    <mat-label>Select time zone</mat-label>
    <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control'  >

      <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id"
        {{timezone.offset + ' ' + timezone.displayName}}


And in child component Ts file I am setting the value like this but its mat select element is not setting to the selected value.

    this.selectedTimeZone = this.filteredTimeZones[0];

    //  selectedTimeZone  i am getting here is this ==  {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""}

Getting the following empty dropdown is displaying. But if i click on dropdown icon i am able to see all the options.
enter image description here

and in the browser if i inspect mat-select element. ngModel value is setting .

enter image description here


To make the selection automatic, the value passed via ngModel must match the value of an Option.

So, I guess selectedTimeZone.displayName doesn’t match any of the timezone.ids bound to your Options.

Leave a Reply

(*) Required, Your email will not be published