🅰️ Angular 16.0.0-next.3 Input() Can Be Required

Now you can require inputs. What a fantastic news!

The next subversion of Angular comes with a long awaited feature.

Now, Input() fields can be actually required.

Up until today Angular didn’t offer a proper way of an requiring an input. There were some harsh workarounds, but they wasn’t never good at telling what input is missing precisely.

class BankAccount {
  // This property is bound using its original name.
  @Input() bankName: string;
  // this property value is bound to a different property name
  // when this component is instantiated in a template.
  @Input('account-id') id: string;

  // this property is not bound, and is not automatically updated by Angular
  normalizedBankName: string;
}

That information is very important, because when you use a component and won’t pass a required parameter to it, you’d like to know about it in a straight forward way.

The new method of marking required inputs itself is very clear:

Inputs are marked as required by passing an object literal with a `required: true` property to the `Input` decorator or into the `inputs` array.

Meaning there won’t be any extra awkward steps to make it happen.

The feature should meet with an enthusiasm from the developers, because they requested it over and over again for years.

To make an input required write:

@Input({ required: true }) inputName: string;