Angular Required Inputs

With the release of Angular v16, the Angular Team also shipped the required inputs feature. In this short blog post, we will see how it’s used and why it’s beneficial for your development process.

What are required inputs?

Required inputs allow us to mark an @Input field in components and directives as required. This means we can specify which inputs are needed for a component or directive to function properly. We can mark inputs as required by adding the required option to the input decorator:

@Input({ required: true }) myRequiredProperty: number;

When not specifying anything, this option will default to false.

How does that improve my development process?

By specifying an input as required, the app won’t compile if the parent does not set the input property:

error NG8008: Required input 'myRequiredProperty' from component SomeRequiredInputComponent must be specified.

This has two positive impacts:

1. Developers are less prone to make errors when (re)using components
2. Components are better readable by explicitly telling the developer which inputs are essential for their core functionality.

Both impacts result in a more efficient development process.

Thank you for reading.