Angular required inputs force parent components to provide designated values and surface omissions during compilation instead of relying on custom runtime errors. section 4.1.1
The modern declaration improves required-value handling by:
- Marking an input with @Input({required: true}) so the compiler checks every component use. section 4.1.1
- Showing a clear editor error when a required value such as projectId is omitted. section 4.1.1
- Removing input-validation boilerplate so the component can focus on business logic. section 4.1.1
ProjectCardComponent
A project card declares projectId as required while continuing to load project data in ngOnChanges. Omitting the binding at the call site produces an immediate required-input diagnostic. section 4.1.1
Listing 4.2 Input marked as required in the ProjectCardComponent
export class ProjectCardComponent implements OnChanges {
private readonly projectService = inject(ProjectService);
@Input({required: true}) projectId!: number; #1
project$: Observable<Project> | null = null;
ngOnChanges(changes: SimpleChanges): void {
if (changes['projectId']) {
this.project$ = this.projectService.getProject(this.projectId);
}
}
}
Inspect the required-input declaration and its surrounding component logic. section 4.1.1
