$attrs.$observe en Angular moderno

$attrs.$observe existía para seguir un atributo interpolado. En Angular el atributo es un input signal, y los host bindings escriben su valor de vuelta en el elemento.

Antes · AngularJS

app.directive('tooltip', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      attrs.$observe('tooltip', function (text) {
        element.attr('title', text);
        element.attr('aria-label', text);
      });
    }
  };
});

<button tooltip="Delete {{ vm.user.name }}">x</button>

Después · Angular

@Directive({
  selector: '[appTooltip]',
  host: {
    '[attr.title]': 'text()',
    '[attr.aria-label]': 'text()',
  },
})
export class TooltipDirective {
  text = input.required<string>({ alias: 'appTooltip' });
}

<button appTooltip="Delete {{ user().name }}">x</button>

Qué cambia

El atributo observado pasa a ser input(); un alias permite que el input comparta el nombre del selector de la directiva.
Las llamadas a element.attr y attrs.$set pasan a ser entradas '[attr.nombre]' en el objeto host.
El código que reaccionaba dentro del callback de $observe pasa a ser un computed o un effect que lee el input.

Consejo de migración. Los callbacks de $observe solían parsear strings como 'true' o '10'. Lleva ese parseo al transform del input (booleanAttribute, numberAttribute) para que el resto de la clase trabaje con tipos reales.

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