What is @input() from Angular v16?

Manthan Ankolekar - Jun 2 '23 - - Dev Community

@Input() decorator in Angular v16 allows you to mark an input property as required. This means that if the property is not passed a value, the Angular compiler will generate an error. This can be helpful for ensuring that your components always have the data they need to function properly.

To use the @Input() decorator to mark an input property as required, you simply need to add the required attribute to the decorator.

@Input({ required: true }) name: string;
Enter fullscreen mode Exit fullscreen mode

Example:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {

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

  constructor() {}

  ngOnInit() {
    console.log(this.message);
  }

}
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .