От хорошего к великому: параметры входных данных, inputs в Angular

В Angular 16.0.0-next.4 была добавлена новая функция - возможность определения входных данных inputs, как обязательных для компонентов и директив. Другими словами, теперь мы можем указать, что компонент или директива требует определенных входных данных inputs для правильной работы.

Используя эту новую функцию, мы можем гарантировать наличие всех необходимых данных до выполнения логики компонента или директивы, что приводит к лучшему качеству кода, меньшему количеству ошибок и более эффективному процессу разработки в целом. Для использования этой функции мы можем установить новый параметр required в нашем входном параметре input.

  
@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
  @Input({ required: true }) elementId: string;
}
  

Если компонент или директива не инициализирует этот входной параметр, то возникнет ошибка компиляции:

Мы также можем передать псевдоним, используя новый параметр alias.

  
@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
   @Input({ required: true, alias: 'elementId' }) id: string;
}
  

Эта функция также работает с директивами хоста. Это означает, что если мы используем директиву с помощью hostDirectives, мы должны предоставить ее обязательные входные данные inputs.