Required @Input() properties
This week I got asked how to make a component’s input property required. Without giving it much thought I started my answer ‘well, you can just …’, then I stopped asking myself the same question. So I opened a new StackBlitz project and started exploring the options before giving an answer.
Before we start let’s imagine we’re creating a component
HelloComponent to greet a person. In order to greet the person properly, the
person property is required.
The first thing that came to my mind was to throw an error when the
person property would be
This doesn’t change much except that it would throw a useful error message.
ERROR TypeError: Cannot read property ‘name’ of null
ERROR TypeError: The input ‘Person’ is required
To make the requirement explicit we can use the
selector in the
@Component decorator to require that the attribute on our component has to exist.
Resulting in the following error when we start the application or at compile time when the application is build Ahead of Time (AoT), if the
HelloComponent doesn’t have a
By putting the two together, I can say that I’m happy with the result.
If you got a better way or see a problem with this approach please feel free to let me know, feedback is as always welcome.
The question I’m asking myself right now, is if this is something that should be done in the first place… again let us know your opinion on this 😃.
Below you can find the two put together as well as the StackBlitz project ready for you to play with.
NOTE: I’m using
_ngOnInit_ but like Isaac Mann mentioned you could also use
Please consider supporting me if have you enjoyed this post and found it useful: