Tip

Avoid Unexpected Errors in Angular 16 with Required Attributes

Improve the reliability of your Angular components by leveraging required inputs and eliminating the chance of omitting critical data.

A common issue when working with Angular components is forgetting to pass all of the inputs that the component needs.

Angular 16 introduced some checks for us to help us with this issue.

I can go into any of my component and say declare required inputs.

export class PersonComponent {
  @Input({ required: true }) person: string = 'Default Person';
}

Now when this component is used anywhere, angular will error out if the input is not provided.