Angular Select In Child Component Bound to Enumeration

angular-enum-select

// CHILD COMPONENT HTML

<select id="upload_type_select" #uploadTypeSelect
	  class="form-control"
	  (change)="onUploadTypeChange(uploadTypeSelect.value)">
<option *ngFor="let upType of uploadTypesMapping"
		[value]="upType.value"
		[selected]="upType.value === uploadDataType">
  {{ upType.type }}
</option>
</select>
  
 // CHILD COMPONENT TS
  
@Input() uploadDataType: UploadDataType;
uploadTypes = UploadDataType;
uploadTypesMapping: any;


ngOnInit(): void {
this.uploadTypesMapping = UploadDataTypeMapping;
}

onUploadTypeChange(newUploadTypeEvtVal: any) {
this.uploadDataType = newUploadTypeEvtVal;
}




/// ENUM AND MAPPING

export enum UploadDataType {
  None = 0,
  Option1 = 10,
  Option2 = 20,
  Option3 = 30
  /* Add any new values to the mapping too! */
}

export const UploadDataTypeMapping = [
  { value: UploadDataType.None, type: 'None' },
  { value: UploadDataType.Option1, type: 'Option A' },
  { value: UploadDataType.Option2, type: 'Option B' },
  { value: UploadDataType.Option3, type: 'Option C' }
];


// CALLING COMPONENT TS (I.E. PARENT COMPONENT)

defaultUploadDataType: UploadDataType;

ngOnInit(): void {
this.defaultUploadDataType = UploadDataType.Euroclear;
}
  
  
// CALLING COMPONENT HTML

<app-upload
    [uploadDataType]="defaultUploadDataType">
</app-upload>