Custom Event Binding (& @Output) in Angular 4

—-HTML file (app.component)

<app-home [ninja]="ninja" (onYell)="yell($event)">hello there!</app-home>

—-TS file (app.component)

yell(e){
 alert("I am yelling");
 console.log(e);
}

—-HTML file (home.component)

<button (click)="fireYellEvent($event)">Hit me</button>

 

—-TS file (home.component)

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Output() onYell = new EventEmitter();
fireYellEvent(e){
 this.onYell.emit(e);
}