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.

Answer 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>

Answer 2

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>