Angular Input Value Transform

Embrace the Future: Moving Beyond Getters and Setters!

Angular 17 has rolled out, and it’s packed with some really cool stuff. There’s a bunch to get excited about, like the new control flow, deferred loading, and some slick improvements in server-side rendering.

But there’s this one feature that’s not making as much noise yet, and it’s pretty neat: Input Transforms. In this blog post, we’re going to take a look at this hidden gem and see how it can make handling input data in your apps a whole lot smoother. Let’s dive in and check out what this feature has to offer!

This feature has been available since version 16.1

Input transforms

Let’s take a look at a simple component that displays characters.

@Component({
  standalone: true,
  //...
  template: `<h1>{{ character.name }}`
})
export class CharactersComponent {
  @Input({required: true}) character!: Character;
}

In our CharactersComponent, we accept a required character input. The goal is to display the character’s name in uppercase. Traditionally, we might use a pipe for this transformation. However, with Angular 17, we can leverage the new transform feature.

function characterNameUppercase(character: Character)…