Angular Input Value Transform

Embrace the Future: Moving Beyond Getters and Setters!

Kevin Kreuzer
4 min readNov 21, 2023

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)…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Kevin Kreuzer
Kevin Kreuzer

Written by Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.

No responses yet

What are your thoughts?