Angular · Node

Angular ViewChild

Input and Output properties allow us to communicate between components in Angular. In short, if you have a component that raises an event, and you want another component to catch that event, you will need to set the Output property on the component that raises that event. If you have a parameter you want to pass to a component, you will use the Input property.

This is the obvious; we know how to pass an input to a child from a parent using @input on the child, and how to raise an event using @output in the child that the parent listens too.

Now, the tricky part is: what if the parent needs to access a function inside the child? Well, this is where we would use a ViewChild decorator.

Our child component will already live inside our parent controller’s template. Maybe listening to an event or passing a value into our child. Now, we need to reference that child component in our parent component class ass well, so we can access members in our child, from our parent.

Parent class
@ViewChild(ChildComponent) child: ChildComponent;

You can download the code here.