How to bind data from backend into frontend at select option angular 9

Question

I am saving a number in backend which then I am trying through this number to show the selected object at select option at Angular.

So far it is only showing the list which I have declared in the TS with enums. But my problem it is that I have saved in backend a number and then in HTML is not the selected value I wish.

Here is the stackblitz

https://stackblitz.com/edit/angular-ivy-fvvnga?file=src%2Fapp%2Fapp.component.html

The HTML it is like this.

<select #selectedValue name="selectedValue"
        id="selectedValue" [ngModel]="selectedValue"
        (ngModelChange)="assignCorporationToManage($event)" class="col-md-12 form-control-sm">
           <option *ngFor="let employment of employmentType"
                   [ngValue]="employment" [selected]="employment">
                {{employment.description | translate}}
           </option>
</select>

The TS looks like this.

  public employmentType = [
    {name: EmploymentType.EmployedFullTime, description: "employmentType.EmployedFullTime"},
    {name: EmploymentType.EmployedPartTime, description: "employmentType.EmployedPartTime"},
    {name: EmploymentType.Internship, description: "employmentType.Internship"},
    {name: EmploymentType.Owner, description: "employmentType.Owner"},
    {name: EmploymentType.BordMember, description: "employmentType.Boardmember"},
    {name: EmploymentType.Volunteer, description: "employmentType.Volunteer"},
  ];

Here is the ngModelChange

assignCorporationToManage(selectedValue) {
console.log(selectedValue); //Here it is returning me the number
}

This is the enum.

export enum EmploymentType {
  EmployedFullTime,
  EmployedPartTime,
  Internship,
  Owner,
  BordMember,
  Volunteer,
  SelfEmployed,
  Shareholder,
  Official,
  Recruiter,
  Freelancer,
  Partner
}

But I do have data which I read from backend.

companyUrl: "www.1234.de"
description: "test"
employmentType: 3
endDate: "2020-09-30"
name: "muster"
role: "IT Web Developer"
startDate: "2020-09-30"

And here as u can see the employmentType is 3 which means the EmploymentType.Owner is selected.

But in HTML I am not able to show which is selected from employment type. If someone need more information I am able to add more code and explain better.

Arunkumar Ramasamy · Accepted Answer · 2020-09-17 10:37:07Z

1

Here you can update your html options.

and your options of html to be

<option *ngFor="let employment of employmentType" [ngValue]="employment.name" [selected]="employment">
   {{employment.description | translate}}
</option>

edited Sep 17, 2020 at 10:37

answered Sep 17, 2020 at 10:21

Arunkumar Ramasamy

7914 silver badges9 bronze badges

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

9 Comments

TheCoderGuy Over a year ago

But the enum has the ID, then in this case what are saying the enum it does not make any sense ?

Arunkumar Ramasamy Over a year ago

You are using that enum to display the name in that select element. Is it right?

TheCoderGuy Over a year ago

The enum it is only declared becaus it can be it will be used in different pages. The name it is the ID but I have writed name. for example is so defined. export enum EmploymentType { EmployedFulltime, EmployedPartTime, }

Arunkumar Ramasamy Over a year ago

can you add your enum in that question?

TheCoderGuy Over a year ago

Yes I can add, please see for changes.

|

TheCoderGuy · Accepted Answer · 2020-09-17 18:34:20Z

0

The correct answer it is this. I found through debugging. It needed to be two way data binding.

<select #selectedValue name="selectedValue"
        id="selectedValue" [(ngModel)]="data.career.employmentType" //here
         class="col-md-12 form-control-sm">
           <option *ngFor="let employment of employmentType"
                   [ngValue]="employment" [selected]="employment">
                {{employment.description | translate}}
           </option>
</select>

answered Sep 17, 2020 at 18:34

TheCoderGuy

8957 gold badges25 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to bind data from backend into frontend at select option angular 9

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related