filters in modern Angular

Filters become pipes. The template syntax is the same; the definition is a class with a transform method.

app.filter('initials', function () {
  return function (name) {
    return name.split(' ').map(function (p) { return p[0]; }).join('');
  };
});

{{ user.name | initials }}

@Pipe({ name: 'initials' })
export class InitialsPipe implements PipeTransform {
  transform(name: string): string {
    return name.split(' ').map(p => p[0]).join('');
  }
}

{{ user.name | initials }}

What changes

• Built-in date, currency, number, uppercase and json filters have direct pipe equivalents.
• The filter and orderBy filters do not exist: filter and sort in the component.
• Pipes are pure by default, so they only run when the input changes.

Related

• services, factories and providers
• ui-router / ngRoute
• $stateChangeStart / transition hooks
• bindings (<, @, &, =)