DEV Community

Samira Awad
Samira Awad

Posted on

1

What's New in Angular 16: Inputs in Components

1) Required Component Input from Angular 16.
Now a component can have a required Input.

Imagine we have a component with an input called user and we want it to be mandatory, meaning it should always be present. To do this, we open and close curly brackets and set required to true:

Image description

By doing this, an error will appear if we try to use this component without passing its mandatory input. If we pass the input, it runs correctly:

Image description

This simplifies development, especially in older projects, as it will be easy to detect which inputs are mandatory and which are not. In previous versions, you could only add validations to check if inputs existed.

2) Input Transformations in Components in Angular 16.
An input is used to pass information from a parent component to a child component. But sometimes we want to pass the information in a different way or format. From this version onward, we can transform our inputs very easily.

Imagine we have a component with an input called stock. We want that when the stock is null, instead of appearing as null, it shows 0. In other words, we want to make a small transformation.

<app-available-stock [stock]="null" />
Enter fullscreen mode Exit fullscreen mode

In the past, we could only do this with a setter, but it was cumbersome as we had to create a setter and then a separate variable to display the data:

Image description

Image description

Now, within an input, we can set the transform property and use a function to handle the transformation:

Image description

Now, the transformation happens inside the object brackets within the input. We set transform and pass a function to it. For the example, we declare the transformation function above, but in practice, we can create a file or something similar. In the component’s HTML, we directly call the stock variable: {{stock}}

3) Extract URL Parameters Using Inputs, Without ActivatedRoute, in Angular 16.
Before, the only way we had to obtain a route parameter was with ActivatedRoute. In the example, the parameter is called id, and the service is injected and used:

Image description

Image description

Image description

However, now we can also do this with inputs, simply by creating an input that has the same name as the route parameter, and its property is retrieved. To make this work, we need to have it configured in the provideRouter in appConfig: withComponentInputBinding():

Image description

Image description

This new approach avoids the need to inject the service.

— Notes based on the Angular course from EfisioDev —

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

Hi Samira Awad,
Top, very nice and helpful !
Thanks for sharing.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay