Passing Data to and Raising an Event from a Nested Component
The content of this post is based on Angular version >= 2.x unless explicitly stated otherwise.
Let’s look at how to pass data to a nested component and raise an event from a nested component. But first, let’s define what a nested component is.
A nested component is an Angular component that provides some piece of the user interface and is embedded within the template of another Angular component. As shown in the image below, we created a component that displays a number as a set of stars. We can then nest this component in any other component that wants to use it, reusing it as needed. In this example, we nested it within the Product List component.
The code required to nest the component is shown below.
In this example, the Star component is the component that will be used as a nested component. Notice it’s selector (ai-star). The Star component is nested in the Product List component’s template by using its selector as a directive. The Product List component is then referred to as the parent component.
If we want to pass data from the parent component to the nested component, we define an @Input decorator on a property of the nested component. In this example, we define a rating property with the @Input decorator. This will be the rating value that we want to display as stars.
Then when we nest the component using the <ai-star> directive, we use data binding to bind the property decorated with @Input to a value from the parent component. This passes the data into the nested component.
In this example, we use property binding to bind the rating property to the product’s starRating property defined within the Product List component. That value then comes through to the @Input rating property in the start.component.ts.
But what if we want to raise an event from the nested component back to the parent? Let’s look at the flow for that:
(1) The user clicks on the star component in the html. We use event binding to bind to a method in the Star Component.
(2) The specified method (onClick) is executed.
(3) The onClick method uses the emit method of an EventEmitter ((4) defined with an @Output decorator) to emit the desired event and passes ‘clicked!’ as the event parameter
(4) Each event to be emitted from the nested component must be defined with an @Output decorator. The event is created using the new keyword. The type of value passed to the event is defined as a generic parameter (<string> in this example)
(5) The parent component (Product List component in this example), uses event binding to bind to the event defined with the @Output decorator (4).
(6) When the event is emitted from the nested component (3), the onNotify method of the Product List component is called, passing in the event parameters (‘clicked!’ in this case)
(7) The onNotify method of the Product List component is executed and any code within that method is executed.
Enjoy!