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.
1export class PersonComponent {
2 @Input({ required: true }) person: string = 'Default Person';
3}Now when this component is used anywhere, angular will error out if the input is not provided.
Transcript
Here, we have an Angular component that takes an input and then it's going to render that input on the template. Now, when we try to render that component, it's going to render its content on the screen.
A common issue when working with Angular components is forgetting to pass all of the inputs that the component needs. In our case, we can quickly fix this by passing person and let's say Jorge, and now we have it updated.
Angular 16 introduced some checks for us to help us with this issue. I can go into my component and say that this is going to be a required input.
For that, I pass the keyboard required as true in the component property. Now when I save this, you see that I'm going to get an error and the application won't be able to build.
It says required input person from component person component must be specified. Now there is no chance I forget to add this component. I can just come back here, add the component, and the app will run as expected.