🅰 NEW In Angular: Required for @Input

Return to site

🅰 NEW In Angular: Required for @Input

· angular

With Angular 16, you can use the {𝑟𝑒𝑞𝑢𝑖𝑟𝑒𝑑:𝑡𝑟𝑢𝑒} option for an @𝐼𝑛𝑝𝑢𝑡()  decorator to make a property mandatory.

This means that the component will only work if you pass a value for that property.

👨‍💻ＣＯＤＥ　ＳＮＩＰＰＥＴ

// 𝒂𝒑𝒑.𝒄𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕.𝒕𝒔
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Angular 16 Example</h1>
<app-greeting [name]="name"></app-greeting>
<app-greeting></app-greeting> // This will cause an error
`
})
export class AppComponent {
name = 'Alice';
}

// 𝒈𝒓𝒆𝒆𝒕𝒊𝒏𝒈.𝒄𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕.𝒕𝒔
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-greeting',
template: `
<p>Hello, {{name}}!</p>
`
})
export class GreetingComponent {
@𝐈𝐧𝐩𝐮𝐭({𝐫𝐞𝐪𝐮𝐢𝐫𝐞𝐝:𝐭𝐫𝐮𝐞}) 𝐧𝐚𝐦𝐞? :𝐬𝐭𝐫𝐢𝐧𝐠; // This property is mandatory
}

 ❌ＥＲＲＯＲ

If the name property of GreetingComponent is not filled, the error message will be something like this:

𝐸𝑟𝑟𝑜𝑟: 𝑀𝑖𝑠𝑠𝑖𝑛𝑔 𝑟𝑒𝑞𝑢𝑖𝑟𝑒𝑑 @𝐼𝑛𝑝𝑢𝑡() 𝑓𝑜𝑟 𝑐𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡 𝐺𝑟𝑒𝑒𝑡𝑖𝑛𝑔𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡: 𝑛𝑎𝑚𝑒

#angular #angular16 #requiredInput #programming

🅰 NEW In Angular: Required for @Input

👨‍💻ＣＯＤＥ ＳＮＩＰＰＥＴ

❌ＥＲＲＯＲ

👨‍💻ＣＯＤＥ　ＳＮＩＰＰＥＴ