Angular2 Multiple component - Interaction using @Output and @Output

Lets say you're building multiple components in your control. There must be some interaction that goes on between main component and child components. Lets take a look how we can do that.

Before proceeding further, it is also important to note that property binding - @Output is used to pass data from parent to child. Event binding @Output is to pass data from child to parent.

We are going to build a component that retrieve a list of item from server and display it on a list on main component and when you click on an item, the child will render out more details.


Next lets take a look at what our main component looks like :-


As you can see we have actually used Angular2 directive here called - "stockdetails". Perhaps it is easier to see here :-



[stock]  = is a directive and it must match @Input in our child component.

When we select a item on the list, we update a variable call stockDetail and you can see we are trying to pass it into "stock" directive (which you will see it in the next code snippet).

Here is the stock detail component. We  decorate it with @Input and then it get render into our component's view.



That's all it is!