Argthtjtr

In a dropdown menu, I've used an Enum data structure (Typescript) to store my values. However it seems that the data binding to the object's category field doesn't take place properly and nothing is selected by default. Is there any better solution?

export enum CategoryEnum {

      EXAMPLECAT1 = 1,

      EXAMPLECAT2 = 2,

      EXAMPLECAT3 = 3,

      EXAMPLECAT4 = 4

    }



@Component({

  selector: 'category',

  template: `

    <label for="appCategory">Example Category: </label>

    <select class="form-control" id="exampleCategory" required 

            (change)="parseValue($event.target.value)"

            (ngModelChange)="changeSelectedType($event)">

      <option *ngFor="let category of categoryTypes"

              [value]="category">{{category.type}}</option>

    </select>

  `

})



export class CategoryComponent {



  private selectedCategoryType: CategoryEnum

  private categoryTypes;



  constructor(){

    this.categoryTypes = CategoryMapping

  }



  parseValue(value : string) {

    this.selectedCategoryType = AppCategoryEnum[value];

  }



  //Logging: Change Selected Product type callback

  private changeSelectedType(event: any) {

    console.log(event); //object, depends on ngValue

    console.log(this.selectedCategoryType); //object, depends on ngValue

  }

}

Mapping the enum data type to labels:

export const CategoryMapping = [

  { value: ExampleCategoryEnum.EXAMPLECAT1, type: 'Example 1' },

  { value: ExampleCategoryEnum.EXAMPLECAT2, type: 'Example 2'},

  { value: ExampleCategoryEnum.EXAMPLECAT3, type: 'Example 3'},

  { value: ExampleCategoryEnum.EXAMPLECAT4, type: 'Example 4'}

];

We can simplify the bind with ngModel, I have create another property to bind with select element and get property to get the vaLue as CategoryEnum

compoenent

  // I have change this to public just for demo

  public get selectedCategoryType():CategoryEnum {

    return this.selectedValue ? this.selectedValue.value: null; 

  }

  private categoryTypes;



  public selectedValue:any;



  constructor() {

    this.categoryTypes = CategoryMapping;

    this.selectedValue = this.categoryTypes[2]; // set default value 

  }

template

<select class="form-control" id="exampleCategory" required  [(ngModel)]="selectedValue" >

      <option></option>

      <option *ngFor="let category of categoryTypes"

              [ngValue]="category">{{category.type}}</option>

    </select>

<br>



selectedCategoryType :  {{selectedCategoryType | json}}

You have to use [ngValue] for options when you want to send non-primitive types (in your case, objects) as @trichetriche said

demo

Yes, set

<select ... [value]="1">

where 1 is example default category enum value.

And use category.value instead whole object category as option value

<option ... [value]="category.value" >

and update your .ts file to handle that change.