How to pass data from parent to child component in Angular 9

The @Input() decorator allows Angular to share data with a child component or directive from a parent component which is a very convenient and cool concept.

In a previous article that I have written “Emit an event from a child to parent component in Angular 9” we have seen how to pass data/information from a child to a parent component by using the @Output() decorator in conjunction with EventEmitter.

Emit an event from a child to parent component in Angular 9

In this article I will walk you through a step-by-step example showing you how to pass data from a parent to a child component using the @Input() decorator.

1 — Quick background about the @Input() decorator

To let Angular know that a property in a child component or directive can receive its value from its parent component we must use the @Input() decorator in the said child. The @Input() decorator allows data to be input into the child component from a parent component.