Carlos Cifuentes
AngularJS → Angular reference

ng-options in modern Angular

The ng-options mini-language disappears. You write option elements with @for and bind the select to a form control.

Before · AngularJS
<select ng-model="vm.countryId"
        ng-options="c.id as c.name for c in vm.countries">
  <option value="">Select a country</option>
</select>
After · Angular
// component
countries = input.required<Country[]>();
countryId = new FormControl<number | null>(null);

<!-- template -->
<select [formControl]="countryId">
  <option [ngValue]="null">Select a country</option>
  @for (c of countries(); track c.id) {
    <option [ngValue]="c.id">{{ c.name }}</option>
  }
</select>

What changes

  • 'c.id as c.name for c in list' becomes an option with [ngValue] and interpolated text.
  • [ngValue] keeps the real type (number, object); [value] always produces a string.
  • group by becomes optgroup elements with a nested @for.

Migration tip. When option values are objects, set [compareWith] on the select. Angular compares by identity by default, which is the same problem track by solved in ng-options.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn