Angular 2 Dropdown Options Default Value

Juggling with object-based options

When your options involve object lists, remember to use [ngValue] and compareWith. These tools enable you to bind complex object structures and establish defaults more effectively.

// Component TS file
// Just like Goldilocks, we're trying to identify the workout that is 'just right'
selectedWorkout = { id: 2, name: 'Back' };
workouts = [
  { id: 1, name: 'Chest' },
  { id: 2, name: 'Back' },
  { id: 3, name: 'Legs' }
];

compareFn(c1: any, c2: any): boolean {
 // Ensuring that two options are similar in every sense before we have coffee together
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}


<!-- Component HTML file -->
<!-- Like a game of spot the difference, but here we trust the computer to find the match -->
<select [(ngModel)]="selectedWorkout" [compareWith]="compareFn">
  <option *ngFor="let workout of workouts" [ngValue]="workout">
    {{ workout.name }}
  </option>
</select>


Dynamically selecting the default value

For settings where your default option isn't written in stone and could change dynamically, set the default value by direct assignment to your model or apply [selected] with *ngFor to render the selected attribute based on a condition.

// Dynamic data loading or interaction can change everything... almost like plot twists in Game of Thrones
setDefaultOption() {
  this.selectedOption = this.options.find(opt => opt.isDefault);
}


<!-- Binding the 'chosen one' within a list of worthy candidates -->
<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options" [value]="option.value" [selected]="option.isDefault">{{ option.label }}</option>
</select>


Embracing flexibility with FormControl

Working with reactive forms? Perfect, set your default selection using a FormControl within a FormGroup. It's like the Swiss Army knife of form management, giving you control over states and validation.

// Inside your component using FormControl
myForm = new FormGroup({
  selectedWorkout: new FormControl(this.workouts[1])
});


<!-- Your reactive form template -->
<form [formGroup]="myForm">
  <select formControlName="selectedWorkout">
    <option *ngFor="let workout of workouts" [ngValue]="workout">
      {{ workout.name }}
    </option>
  </select>
</form>


Best practices to follow

Just as Bruce Lee says, "I fear not the man who has practiced 10000 kicks once, but I fear the man who has practiced one kick 10000 times". To master dropdown default values in Angular, follow these practices:

• Fallback: Always have a default option at the ready, even if the model hasn't found its soulmate (value) yet.

• Model Updates: Async loaded data requires you to update your model as soon as it's loaded, this ensures the new 'chosen one' reflects in the front-end view.

• Debugging: If your default selection is playing hide and seek, make sure that the model value exactly matches one of the available option values (they should be twinsies!).

• Accessibility: Drop some aria attributes for the humans who trust machines for narration. Ensure default options provide meaningful information not only to developers but also to assistive tech users.