ng-options en Angular moderno

El mini-lenguaje de ng-options desaparece. Escribes los elementos option con @for y conectas el select a un control de formulario.

Antes · 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>

Después · 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>

Qué cambia

'c.id as c.name for c in list' pasa a ser un option con [ngValue] y texto interpolado.
[ngValue] conserva el tipo real (número, objeto); [value] siempre produce un string.
group by pasa a ser elementos optgroup con un @for anidado.

Consejo de migración. Cuando los valores de las opciones son objetos, define [compareWith] en el select. Angular compara por identidad por defecto, el mismo problema que track by resolvía en ng-options.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn