directives en Angular moderno

Las directivas de elemento con template pasan a ser componentes. Las directivas de atributo siguen siendo directivas, escritas como clases.

Antes · AngularJS

app.directive('autofocus', function () {
  return {
    restrict: 'A',
    link: function (scope, element) { element[0].focus(); }
  };
});

Después · Angular

@Directive({ selector: '[appAutofocus]' })
export class AutofocusDirective {
  private el = inject<ElementRef<HTMLElement>>(ElementRef);

  constructor() {
    afterNextRender(() => this.el.nativeElement.focus());
  }
}

Qué cambia

restrict: 'E' con template pasa a ser un @Component.
restrict: 'A' pasa a ser una @Directive con selector de atributo.
La función link pasa a ser código de clase, hooks de ciclo de vida y host bindings.

Consejo de migración. Las directivas que envuelven plugins de jQuery necesitan una decisión cada una: volver a envolver el plugin o reemplazarlo por un componente Angular nativo.

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