Passing data between components with input and output

So I'm new to angular two and i've looked at several tutorials trying to figure out how to do this and I can't get it to work. Can you tell me what I'm doing wrong here?

So I'm trying to pass a boolean value from one component to another, which will trigger an animation with ng-class. The event happens in the child component. I need the parent to respond.

Child component:

export class DefaultRouteViewComponent implements OnInit {
  @Input() compare: boolean = false;
  @Output() compareEvent = new EventEmitter();

  constructor(public _menu: MenuService) {}

  toggleCompare () {
    this.compare = !this.compare;
    this.compareEvent.emit({
       value: this.compare
    })
  }

Parent component:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: '<div class="app-wrapper" [ngClass]="{'hide-app' : hideApp}" (hideApp)="hideAppChange($event);" (compareEvent)="hideAppChange($event)"></div>',
  directives: NgClass, DefaultRouteViewComponent],
})
export class AppComponent implements OnInit {
  hideApp: Boolean;

  constructor() {}

  hideAppChange(event) {
     console.log(event);
  }
}

I feel like the problem is in the parent component template. I'm not sure though. Please help! Thanks.