Anyone who’s spent time in therapy knows the importance of good communication. And when it comes to parents and their children it can be a real challenge. But Angular makes this easy!

Last article, we discussed sharing data from parent to child components via the @Input decorator. Still, it seemed a little one-sided to me. I want to even the score, so let’s figure out how to talk back to ma and pa.

@Output & EventEmitter

Here’s the jist: We’re going to create an instance of EventEmitter in our child component and decorate it with the @Output keyword. This one-two punch will emit an event back up the component chain to our parent.

Let’s dig in!

Child Component

First, we’re going to bind a method to a click event.

    import { Component, Output } from '@angular/core'; // import Output symbol

    @Component({
    selector: 'child',
    template: 
        `
        <button (click)='clickaroo()'>Click Here</button> <!-- click binding -->
        `
    })

    export class ChildComponent {
        @Output() talkBack: EventEmitter<string> = // decorate property w/ Output
            new EventEmitter<string>(); // new EventEmitter object

        public clickaroo():void {
            this.talkBack.emit('Yeah, whatever!') // the emit method is key
        }
    }

Parent Component

Within our parent component we want a way to ‘listen’ for an event coming from our child.

    @Component({
    selector: 'parent',
    template: 
        `
        <p>{{messageFromChild}}</p>
        
        <!-- Matching the @Output property from our child,
             talkBack is our 'event listener' & we trigger
             onClickFromChild when it 'hears' an event -->
        <child (talkBack)='onClickFromChild($event)'></child>
        `
    })

    export class ParentComponent {

        public messageFromChild;

        public onClickFromChild(message: string):void {
            this.messageFromChild = message;
        }
    }

Once we ‘hear’ the event, we set messageFromChild with its value. One key thing to understand is that the $event parameter passed to onClickFromChild stores whatever value’s been emitted from the @Output / EventEmitter in our child component.

And that, ladies and gents, is that.

Now that we’ve got a handle on communicating up and down the component chain, between parents and their children, who needs a $scope object anyway?!