Angular Material mat-select dynamic data binding in Angular
37,304
Solution 1
You can try with this solution
I have create a demo on Stackblitz
Component.ts
editInfo(educationInfo) {
this.education_level = educationInfo.aa;
this.exam_title = educationInfo.bb;
this.gender = educationInfo.cc;
this.educationLevelChangeAction(this.education_level);
}
educationLevelChangeAction(education) {
this.exam_title = "";
let dropDownData = this.educationList.find((data: any) => data.educationLevelName === education);
if (dropDownData) {
this.degreeTitleList = dropDownData.degreeTitleList;
} else {
this.degreeTitleList = [];
}
}
Component.html
<mat-form-field>
<mat-select placeholder="Select Level of Education" name="education_level" (selectionChange)="educationLevelChangeAction(education_level)" [(ngModel)]="education_level" >
<mat-option *ngFor="let education of educationList" [value]="education.educationLevelName" >{{ education.educationLevelName }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select Exam/Degree Title" name="exam_title" [(ngModel)]="exam_title">
<mat-option *ngFor="let degreeTitle of degreeTitleList" [value]="degreeTitle">{{ degreeTitle }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [(ngModel)]="gender">
<mat-option *ngFor="let gender of genderList" [value]="gender">{{ gender }}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{education_level}} {{exam_title}} {{gender}}</p>
Solution 2
in your code you are binding object to [value] so it can't bind it right, if you change your value to string like you did in gender section will be OK, for e.g:
changing [value]
from education
that is object to education.educationLevelName
that is a string and now it works correctly.
<mat-form-field>
<mat-select placeholder="Select Level of Education" name="education_level" (selectionChange)="educationLevelChangeAction(education_level)" [(ngModel)]="education_level" >
<mat-option *ngFor="let education of educationList" [value]="education.educationLevelName" >{{ education.educationLevelName }}</mat-option>
</mat-select>
</mat-form-field>
Author by
monir tuhin
Updated on November 21, 2020Comments
-
monir tuhin over 3 years
I am using Angular 6 and Angular Material. When i click on Edit button the Secondary, SSC and Male Value will be initialized on the select. But i can not able to do it. I only able to show Male value on the drop down after clicking Edit button. So i want to show all value on the drop down and pass object for the dynamic selection. Thanks.
My code link here: stackblitz link
-
monir tuhin almost 6 yearsThanks. You have done great work. But there is no value initialization of SSC on Exam/Degree title dropdown after click Edit button. Otherwise it's done perfectly
-
monir tuhin almost 6 yearscan you ssc value show on the Exam/Degree Title dropdown. thanks
-
Fateme Fazli almost 6 years@monirtuhin did you check my answer? it's simpler than what you think and no need to make it complecated like other answer.
-
monir tuhin almost 6 yearsIf i put O Level/Other on the Exam/Degree Title drop down rather than SSC then it's not working.It gave only first index but i want only put any value from any index after click Edit button. Thanks
-
monir tuhin almost 6 yearsthanks @fateme fazli. I have checked your answer. I have tried this before but it's not working appropriately for me.
-
monir tuhin almost 6 yearsLet us continue this discussion in chat.
-
monir tuhin almost 6 yearsthanks a lot. i have changed something. It's worked perfectly. You have saved my lot of time. thanks again
-
monir tuhin almost 6 yearsI am grateful to you. You solved my two problems. Can you solve this? stackoverflow.com/questions/51233913/…
-
Krishna Rathore almost 6 yearsOkay I will check