$filter in JavaScript en Angular moderno

$filter('nombre') en controladores y servicios pasa a ser una llamada directa a una función. Angular exporta las funciones de formato que usan sus pipes.

Antes · AngularJS

app.controller('InvoiceCtrl', function ($filter) {
  var vm = this;
  vm.label = $filter('currency')(vm.total, '$') +
    ' on ' + $filter('date')(vm.createdAt, 'mediumDate');
  vm.active = $filter('filter')(vm.items, { active: true });
  vm.sorted = $filter('orderBy')(vm.active, 'name');
});

Después · Angular

import { formatCurrency, formatDate } from '@angular/common';

export class InvoiceComponent {
  private locale = inject(LOCALE_ID);
  items = input.required<Item[]>();
  total = input.required<number>();
  createdAt = input.required<Date>();

  label = computed(() =>
    formatCurrency(this.total(), this.locale, '$', 'USD') +
    ' on ' + formatDate(this.createdAt(), 'mediumDate', this.locale));

  sorted = computed(() => this.items()
    .filter(i => i.active)
    .sort((a, b) => a.name.localeCompare(b.name)));
}

Qué cambia

formatDate, formatCurrency, formatNumber y formatPercent de @angular/common reemplazan a $filter('date'), $filter('currency') y $filter('number').
Una clase pipe también se puede inyectar y llamar con transform(), si la agregas a providers.
$filter('filter') y $filter('orderBy') pasan a ser Array.filter y Array.sort dentro de un computed.

Consejo de migración. Para los filtros propios, mueve la lógica a una función exportada y deja el pipe como un envoltorio delgado. Así los templates y el código TypeScript comparten una sola implementación.

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