Passing data into component in Angular 2 using @Input

If you call a component in the template of another component using component selector then you may need to pass some information to the component which has been called in the template. Now the query is how to achieve that? Cool !!!, no worries as Angular 2 is already having the solution for this. What's that solution? Angular 2 came with various decorator features for achieving in various functionalities, so out of them by using @Input decorator you can pass the data from template of a component to the other component. Follow the below image for more visual understanding.

Let's assume you have a component called AComponent which has selector "a-component" and another component BComponent which can be identified as "b-component". Assume that "b-component" has been called in the template of AComponent, then for passing the data from AComponent to BComponent you need to follow below steps,

In first step you need to pass the data using "[ ]" from the template of AComponent, i.e

Here [name] and [value] are the two attributes for passing the information such as name and value from AComponent i.e

In second step you need to get the above passed information i.e name and value using @Input decorator as mentioned below,

Note:

• AComponent throws the data to BComponent using "[attributeName]"
• BComponent catches the data from AComponent using "@Input() attributeName"

Please comment down if you have any concern on the article, so the we can improve our content. Thanks for reading.