Required Inputs in Angular 16

Angular 16 is expected to arrive in May 2023. Among other big changes, a very useful feature is coming: “required inputs!” Added in Angular v16.0.0-next.3, components can now mark their @Input as required. If no value is provided by the consumer of the component, then you will get a compile-time error. Let's see it in action!

Creating a Required Input

Let’s make a simple “User Component” that takes in a user profile object and displays the information.

An @Input has been added to the component that accepts a User object. It can be made required by providing some extra configuration to the @Input decorator.

Until now, there has not been an easy way to make @Inputs required. This is finally the solution Angular developers have been waiting for.

What Does This Do For Us?

When we go and use our component, but fail to provide the required @Input...

…we will get a compilation error.

Angular has prevented a potentially broken usage of a component from ever being run in the browser, by catching it at build time. This can help you avoid some bad bugs in your production application.

This is different than the runtime error we would have gotten before Angular 16. If we didn’t provide a user value to our component, and our component tries to access a property of the undefined user object, we will get an error at the time of execution in the browser console. If this @Input was made required, this error in production below would never have occurred.

For anyone who maintains an Angular library that provides components, this new required option is going to become essential, helping catch potential misuse of your library's components as early as possible.

Not Just For Simple Cases

There are many ways to write an @Input in Angular, and you can mark an @Input as required no matter the use case.

Simple Input

The most common usage of @Input of course can be marked as required:

Different Binding Property

You can also create an @Input that is bound to one name in the DOM, but its value is stored in a differently named component variable:

‍

Note that the syntax for an explicit @Input binding property has changed when used in conjunction with the requiredvalue.

Input Bound to a Setter

You can even mark an @Input bound to a TypeScript Setter as required, for when you need to have a function call or more complex logic tied to the @Input. The setter will be called any time the @Input value changes.

All of these various required @Input declarations will be caught by the Angular compiler, making sure you don't make mistakes when using your component.

You can pull and run the example code for yourself here!

Disclaimer: Angular 16.0.0-next.7 was the latest v16 beta release at the time of writing this article. Beta versions of Angular should not be run in any production application or environment.

Final Thoughts

Required Input, though it is a small feature, is a highly requested feature that is going to help Angular developers write better components that clearly spell out their intent, and prevent users of those components from unintentionally creating bugs. Make sure your component gets the data it needs and make your @Input required, coming soon in Angular 16!

‍