Select dropdown based on enum in Angular2

Enums allow angular developers to write more maintainable code, Here is a case where we can reuse a enum across the application which brings more maintainability and less bugs into our code.

While writing front-end angular applications, Most of the time we know that what values to be shown in a drop-down component, just as below

We choose typical <select> tag as the component, but as a force of habit we hard-code all these options in the HTML itself which I feel is bit clumsy way of writing the code . Instead we can create a enum type with all the key value pairs. for ex.

export enum TaskType {
  GENERAL = 'GENERAL', 
  TASK = 'TASK',
  EVENT = 'EVENT',     
  INFO = 'INFO',       
  MEETING_INVITE = 'MEETING_INVITE',
  NOTIFICATION = 'NOTIFICATION',
  ISSUE = 'ISSUE',
  DISCUSSION_THREAD = 'DISCUSSION_THREAD', 
  PAGE = 'PAGE', 
  POST = 'POST', 
  ANNOUNCEMENT = 'ANNOUNCEMENT'
}

And in the component we write below code

import { TaskType } from 'src/app/enums/task-type.enum';

@Component({
  selector: "app-task-view",
  templateUrl: "./task-view.component.html",
  styleUrls: ["./task-view.component.scss"]
})
export class TaskViewComponent implements OnInit {
  public task: Task;
  private taskTypes = TaskType;
  public taskTypeOptions = [];

  constructor() { }

  ngOnInit() {
   // Below line extracts all the keys from the enum 
    this.taskTypeOptions = Object.keys(this.taskTypes);
  }
}

And in the HTML template

<b>Type</b>
  <select [(ngModel)]="task.taskType" style="display: inline-block" class="ml-1 mb-4">
<!-- Below line will be looped through the keys and for every key, set label as value from enum pair and key as value attribute of <option> tag-->
      <option *ngFor="let key of taskTypeOptions" [value]="key" [label]="taskTypes[key]"></option>
  </select>

That’s it, neat and clean.

So now our dropdown component is bit more maintainable since if we have to add a new set of options or modify existing options in the dropdown then we just need to add/modify those key-value pairs in the TaskType enum and BOOM! they’ll just appear in the dropdown without any extra code.

And another advantage of writing this way is that we can reuse the enum in other areas like comparisons/conditions etc, across the application.

if(TaskType.GENERAL === valueToBeCompared){
 // TODO: do something
}

// Or in a switch statement
switch(taskType){
case TaskType.GENERAL: 
  // Do something
  break;
case TaskType.ISSUE:
  // Do something
  break;
// ...
}

Instead of hardcoding string values in conditions, which is more messy and also in case if a value to be modified for some reason then we have to change it in all the places we hardcoded that value. And If we miss one then code will be prone to bugs which are harder to trace; Since there will be no exception/error.

Now, with the above approach just changing the value in the enum would be enough. since the same value will be referred everywhere else.

Hope you enjoyed this article and please let me know if you would like to add anything here.