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 —

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay