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.

A child component can have multiple fields with the input decorator and each field can be of any type (string, number, object, etc…).

Angular documentation does not mention how many input fields a child component can have; however, generally speaking if you have a child component that does accept a large number of input fields then this would be an indication that the child component is performing way too many functionality and you might want to break it up.

2 — create a project

Now that we have a general idea about the @Input() let’s start working on our example.

First let’s start by creating a new Angular project. In VScode open a terminal and type in the following command:

>ng new input-tutorial

Let the process complete. Packages needed to run the project will begin to download. You will see a…