Required @Input properties in Angular – Dhananjay Kumar

Angular 16 adds a new future of making an @Input() decorated property REQUIRED, which means that to use that component, the value of the required property has to be passed.

@Input({required:true}) title? :string; 

To Understand it, let us assume that you have a component named ProductComponent with @Input() decorated properties as shown below,

const template = `
   <p>title : {{title}}  price : {{price}} </p>  
`
@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule],
  template : template
})
export class ProductComponent {

  @Input() title? :string; 
  @Input() price? : string; 

}

We are using ProductComponent inside AppComponent, as shown below.

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

const template = `
<app-product [title]="title"></app-product>
`
@Component({
  selector: 'app-root',
  template : template
})
export class AppComponent {
  title = "Pen"; 
}

As you notice here is that we are,

• Passing value to the title property
• Not passing value to the price property.

In the output, you can see that value of the title is printed, whereas the value of the price is rendered empty.

---

We can use the ProductComponent without passing the value of all input decorated properties, and Angular does not complain about that.  Now let us say that we have a requirement that,

The price property is a required property to use the ProductComponent.

Starting Angular 16, we can make an @Input() decorated property as the required property. As you see Input interface has an optional, required boolean property.

We can use the required property to make an @Input() decorated property required, as shown below,

You can create a component with a combination of required and optional properties, as shown below,

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

const template = `
   <p>title : {{title}}  price : {{price}} </p>  
`
@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule],
  template : template
})
export class ProductComponent {

  @Input() title? :string; 
  @Input({required:true}) price? : string; 

}

And Angular complains about when you try using the ProductComponent without passing value for price property.

To use the ProductComponent, you must pass the value of the required @Input() decorated property as shown in the next code block,

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

const template = `
<app-product [title]="title" [price]="price"></app-product>
`
@Component({
  selector: 'app-root',
  template : template
})
export class AppComponent {
  title = "Pen"; 
  price = "100"; 
}

This way, you can make an @Input() decorated property as required. I hope you find this post helpful. Thanks for reading.