Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component.
Approach:
-
Let's create two components:
-
parent
-
child
-
In the parent component, declare the property that you want to receive in the child component, say 'ParentId'.
-
While including the child component inside the parent component, bind the 'ParentId' property to the child component using property binding.
-
Now in the child component import Input from @angular/core and create a property decorated by @input decorator to receive 'ParentId' from parent component. The name of property should be the same as used for binding the 'ParentId' property i.e 'id'.
-
'ParentId' will be successfully received in the child component as 'id'.
Example:
-
In this example, we will create a property
'ParentId' and receive it in the child component.
Let's write the code for the parent component.
-
Now write the code for the child component
Output:
👁 Image
