Improving DX with new Angular @Input Value Transform - Angular Experts

share

Angular 17 has officially landed, and it brings a host of exciting capabilities. From the new control flow syntax to deferred loading, there’s plenty to look forward to, along with notable advancements in how server-side rendering is handled.

Still, one feature hasn’t gotten the attention it deserves, and it’s quite handy: @Input Transforms. In the following sections, we’ll explore this underrated addition and discover how it can streamline the way you manage input data in your projects. So, let’s get started and see what it brings to the table!

This capability has existed since version 16.1

@Input Transforms

Consider a basic component designed to render characters.

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

Inside our CharactersComponent, there's a mandatory character @Input we receive. Our aim is to render that character’s name using capital letters. In Angular 17, this functionality can be achieved through the newly introduced transform option.

Another approach would involve applying a pipe to perform this conversion.

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

In the example above, we made use of a basic function that accepts a Character and returns a modified Character whose name is capitalized. Any function can serve as the transform—whether it’s reshaping data, tweaking strings, or handling more advanced logic, the flexibility is unlimited.

Built-in Transforms

Angular also provides two ready-to-use transforms: numberAttribute and booleanAttribute. Here’s a brief dive into how these built-ins can streamline our code.

numberAttribute

With numberAttribute, any @Input gets automatically converted into a number value.

@Component({
  standalone: true,
  selector: 'circle',
  //...
})
export class CircleComponent {
  @Input({ transform: numberAttribute }) 
  radius!: number;
}

Once the numberAttribute transform is applied, the component can be consumed in two distinct ways.

<!-- does not compile without the numberAttribute transform -->
<circle radius="100"/>

<!-- works with or without the numberAttribute transform -->
<circle [radius]="100"/>

booleanAttribute

The second built-in utility is booleanAttribute. It serves to turn input values into boolean primitives.

This proves handy because it streamlines the way we set boolean flags on our components.

@Component({
  standalone: true,
  selector: 'product',
  //...
})
export class ProductComponent {
  @Input({ transform: booleanAttribute }) 
  showDetails!: boolean;
}

Once you've added this implementation, the component can be consumed in several different ways.

<!-- without the booleanAttribute this code would not compile -->
<my-product showDetails/>

<!-- without the booleanAttribute this code would not compile -->
<my-product showDetails="true"/>

<!-- works with and without the booleanAttribute transform -->
<my-product [showDetails]="true"/>

The booleanAttribute function clearly streamlines the code, allowing a flag to be activated simply by including its name.

You aren't alone in appreciating this capability—Angular already leverages it internally within the router.

Limitations of the Built-in Transforms

Although these built-in transforms provide handy functionality, certain drawbacks deserve attention. Applying them results in the loss of type information, which increases the risk of spelling mistakes. Such typo vulnerabilities can inadvertently introduce errors into the application.

Let's revisit the product.component one more time.

@Component({ 
  standalone: true,
  selector: 'my-product',
  //...
})
export class ProductComponent {
  @Input({ transform: booleanAttribute }) 
  showDetails!: boolean;
}

Here’s an example of how this component might be used.

  <my-product showDetails="falser"/>

Beyond the typo—where falser was written instead of false—a deeper issue lurks here. The intention appears to be turning a flag off, but because booleanAttribute treats every string except an explicit "false" as true, the desired outcome may not materialize.

Bringing BooleanAttribute and NumberAttribute Into Legacy Projects

Adopting these features across an existing codebase might seem like a monumental undertaking. The good news? I’ve created schematics to do the heavy lifting. These schematics automatically attach booleanAttribute and numberAttribute transformers to inputs declared as boolean or number, while preserving and merging with any pre-existing input metadata like alias or required.

With these schematics, you can opt to apply just the booleanAttribute transformer, just the numberAttribute transformer, or both together.

A transform transformer

Curious about how this library came to be? The entire build happened live during my Twitch sessions. Consider following along and tuning in for easygoing, yet valuable conversations about Angular and other modern frontend topics. Hope to catch you there!

Liking the look of the code preview? Check out our new theme plugin

Skol - the ultimate IDE theme

Craft better interfaces by pairing Angular with AI

Angular + AI Video Course

Create more sophisticated UIs using Angular paired with AI

Angular + AI Video Course

Find this helpful and want to fully get to grips with Angular's freshly introduced Signal Forms?

A Deep-Dive Workshop on Angular Signal Forms

Occasional extra promotional offers might appear in the emails; check our Privacy policy for all the details.

Questions & feedback

Feel free to drop your questions, share your insights, and add your perspective on the subject

Check these out too

Browse more posts from the Angular Experts team to deepen your knowledge on related areas such as Angular !

Top 10 Angular Architecture Mistakes You Really Want To Avoid

In 2024, Angular keeps changing for better with ever increasing pace, but the big picture remains the same which makes architecture know-how timeless and well worth your time!

emoji_objects emoji_objects emoji_objects

Tomas Trajan

@tomastrajan

Sep 10, 2024

15 min read

Angular Signal Inputs

Revolutionize Your Angular Components with the brand new Reactive Signal Inputs.

emoji_objects emoji_objects emoji_objects

Kevin Kreuzer

@nivekcode

Jan 24, 2024

6 min read

Angular Material components testing

How and why to use Angular Materials component harness to write reliable, stable and readable component tests

emoji_objects emoji_objects emoji_objects

Kevin Kreuzer

@nivekcode

Feb 14, 2023

7 min read

Put our deep know-how to work for your team

For years, the Angular Experts team has collaborated with both large enterprises and emerging startups, delivering workshops, crafting tutorials, and curating comprehensive open source projects. We are genuinely proud of our expertise in modern front-end development and would be excited to support your growth