1

I have an issue,I have a drop down list inside a select area,the problem is when the component is loaded, by default the first option in the list is selected and a content is shown, but this content is not updated, it's get updated when we select again the same option selected first.here is my template.

<mat-form-field class="style-select">
            <mat-select name="structureTypes" #ctrl="ngModel" [(ngModel)]="MasStruc">
                <mat-option *ngFor="let master of masterList" (click)="onSelect($event)" [value]="master">
                    {{master}}</mat-option>
            </mat-select>
        </mat-form-field>

here is two image corresponding to the issue:

enter image description here

Here the input FWT is automatically selected the first time when I open the component,but the list below is not updated,in order to update it we need to select again the same option manually second time.

here is a image:

enter image description here

I think to make a placeholder by default ask the user to select an option,but i want to share that with you if there is other way to select again automatically an option when we load the component the first time.

kushal shah
  • 823
  • 6
  • 9
houssam Lemhamdi
  • 49
  • 2
  • look at this links it will help you select by default values https://stackoverflow.com/questions/50650790/set-default-option-in-mat-select/50651042 https://stackoverflow.com/questions/47333171/angular-material-mat-select-not-selecting-default let me know if need more help about this – kushal shah Dec 26 '19 at 16:13

1 Answers1

0

Am making my suggestion as far as I understood. I'm providing solution for both, selecting a value by default as well as having a place holder. please check them.

HTML: 

 <mat-form-field class="style-select">
   <mat-label>Select an option</mat-label>
   <mat-select name="structureTypes" #ctrl="ngModel" [(ngModel)]="MasStruc">
    <mat-option *ngFor="let master of masterList" [value]="master">
        {{master}}</mat-option>
   </mat-select>
 </mat-form-field>
 <br>
 <mat-form-field class="style-select">
   Selected by default
   <mat-select name="structureTypes" [(ngModel)]="selectedValue">
    <mat-option *ngFor="let master of masterList" [value]="master">
        {{master}}</mat-option>
    </mat-select>
 </mat-form-field>

TS:

masterList = [
   "option1",
   "option2"
];
selectedValue: string = this.masterList[1];

Let me know if I got your question wrong.

Nisheanthan
  • 151
  • 1
  • 1
  • 10
  • no that's not what i want,this is give 2 drop down area,i want a single drop down but when i load the component the option FWT...is selected again in order to update the content of the table below. – houssam Lemhamdi Dec 26 '19 at 16:57
  • can you share your code via stackblitz. so I can go through them and help you. – Nisheanthan Dec 26 '19 at 17:06