CODEWITHSUNDEEP
angular
Brooke Clonts
Brooke Clonts

Reputation: 465

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.

Upvotes: 1

Views: 2602

Answers (2)

Madhu Ranjan
Madhu Ranjan

Reputation: 17914

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

Upvotes: 0

Christian Toms
Christian Toms

Reputation: 31

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!

Upvotes: 1

Related Questions