Angular Material mat-select dynamic data binding in Angular

Question

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

Krishna Rathore · Accepted Answer · 2018-07-02 05:52:37Z

16

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>

answered Jul 2, 2018 at 5:52

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

monir tuhin Over a year ago

Thanks. 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 Over a year ago

can you ssc value show on the Exam/Degree Title dropdown. thanks

monir tuhin Over a year ago

If 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 Over a year ago

Let us continue this discussion in chat.

Lia · Accepted Answer · 2018-07-02 05:56:16Z

3

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>

edited Jul 2, 2018 at 5:56

answered Jul 2, 2018 at 5:48

Lia

12k3 gold badges36 silver badges53 bronze badges

1 Comment

monir tuhin Over a year ago

thanks @fateme fazli. I have checked your answer. I have tried this before but it's not working appropriately for me.

Collectives™ on Stack Overflow

Angular Material mat-select dynamic data binding in Angular

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related