1

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.

Brooke Clonts
  • 465
  • 1
  • 10
  • 20

2 Answers2

1

The 'compareEvent' event binding needs to be placed as an attribute on the selector for the child component in the parent component's html.

So in the parent component template html you need something like:

<app-default-route-view (compareEvent)="hideAppChange($event)">
</app-default-route-view>

Hope that helps!

Christian Toms
  • 31
  • 3
0

possible duplicate Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component

If you need to communicate between Parent and child routed components you may use Bi Directional service

you may see similar implementation here

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69