Required Inputs in Angular v16

Post Editor

Required Input is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

2 min read
0 comments
post

Required Inputs in Angular v16

Required Input is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

post
post
2 min read
0 comments
0 comments

Angular 16 is now available, bringing with it a host of great features and improvements to the developer experience. In this document, we'll take a closer look at the new Input syntax.

Input is an Angular decorator that allows us to bind a component's property to a DOM property in the template. When Angular runs change detection, it checks for changes in the bound DOM property and updates the component's property if necessary, ensuring it is always up to date.

Let's consider an example of using a component:

<>Copy
<app-child [name]="'John'"></app-child>

The DOM property name is bound to a component's property, and within the component, we can use the value John.

Here is an example from the component's class perspective:

<>Copy
@Component({ selector: 'app-child', template: `Name: {{name}}` }) class ChildComponent { @Input() name: string; }

However, there was no simple way to ensure that the name property is passed from the parent, which was not ideal.

<>Copy
<app-child></app-child>

The code will work without any errors, but the rendered template will be missing a name. A workaround for this is to ensure that the selector requires that property.

<>Copy
@Component({ selector: 'app-child[name]', }) class ChildComponent { @Input() name: string; }

However, adding this for every input property can be a tedious process.

Required Inputs
Link to this section

Fortunately, that's a thing of the past! Angular 16 introduces required inputs.

Now, inputs can take an additional configuration option that makes them required. This means that we will get an actual compile-time error if we don’t specify a value for that input. Here's an example:

<>Copy
Required input 'name' from component ChildComponent must be specified

This is what the new syntax looks like:

<>Copy
@Component({ selector: 'app-child', template: `Name: {{name}}` }) class ChildComponent { @Input({ required: true }) name: string; }

The required option is optional, so we can still have "optional" inputs as before.

<>Copy
@Component({ selector: 'app-child', template: `Name: {{name}}` }) class ChildComponent { // required input @Input({ required: true }) name: string; // basic input, not really required @Input() lastName: string; }

Aliasing
Link to this section

There is also an interesting case of aliasing inputs, where we want to have a different name for the DOM property than the name of the component's property that is bound to it.

To accomplish this, we can add an optional alias for binding the DOM property, as shown below:

<>Copy
@Input() name: string; @Input('lastname') surname: string;

To bind the surname property in the template, we would have to use the lastname property.

<>Copy
<app-child name="John" lastname="Doe"></app-child>

From Angular 16, it is possible to add an alias using the new syntax. This can be done by including a configuration option to the Input, as shown below:

<>Copy
@Component({ selector: 'app-child', template: `Name: {{heroName}}` }) class ChildComponent { // required input with alias @Input({ required: true, alias: 'name'}) heroName: string; // basic input with alias @Input({alias: 'lastname'}) heroSurname: string; }

Have fun and enjoy Angular 16 features! 🤓

Comments (0)

Be the first to leave a comment

Share

About the author

author_image

Hey, I'm a frontend developer, passionate about good design for both the code and UX/UI side of things. I am mainly involved in Angular, rxjs, typescript subjects.

author_image

About the author

Maciej Wojcik

Hey, I'm a frontend developer, passionate about good design for both the code and UX/UI side of things. I am mainly involved in Angular, rxjs, typescript subjects.

About the author

author_image

Hey, I'm a frontend developer, passionate about good design for both the code and UX/UI side of things. I am mainly involved in Angular, rxjs, typescript subjects.

Featured articles