Angular 16 REQUIRED Input Properties
Tags: angular, webdev
Published: 2023-04-18 04:13:38

Angular 16 adds a new feature 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdmr05gs01yajee0fkfx.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7krclb150guodpz0e1ip.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lobqq93fvbkzvwn9q8yo.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4cv20uoohpfl0l2mkx6.png)


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.