CODEWITHSUNDEEP
angular
Chris Rockwell
Chris Rockwell

Reputation: 1852

Parent component not responding to child's event emitter

Given the following two components, I am attempting to listen to an event in a child. The CommentMetaComponent is placed in the CommentComponent.

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

@Component({
    selector: 'comment',
    templateUrl: 'comment-component.html',
})
export class CommentComponent {
    @Input() comment: any;
    @Input() eventId: any;
    showReplies: boolean = false;

    toggleRepliesListener(event) {
        console.log('in');
        this.showReplies = !this.showReplies;
    }
}

/* Comment Meta Container */
@Component({
    selector: 'comment-meta',
    template: `
        <button><ion-icon name="undo"></ion-icon> Reply</button>
        <button *ngIf="comment.parent && comment.comments && comment.comments.length" (click)="toggleReplies()">
          <ion-icon name="chatboxes"> </ion-icon> View {{ comment.comments.length }} replies
        </button>        
      `
})
export class CommentMetaComponent {
    @Input() comment: any;
    @Output() showCommentsToggle: EventEmitter = new EventEmitter();

    toggleReplies() {
        console.log('emitting');
        this.showCommentsToggle.emit('toggled');
    }
}

comment-component.html

<div class="comment">{{ comment.message }}</div>
<comment-meta [comment]="comment"></comment-meta>

<ion-list *ngIf="comment.comments && comment.comments.length && showReplies" (showCommentsToggle)="toggleRepliesListener($event)">
  <comment-thread [comments]="comment.comments" [parent]="comment.id"></comment-thread>
</ion-list>

Upon clicking the button, I see (in the console) emitting, but I never see in logged (which I expect to happen inside CommentComponent::toggleRepliesListener().

Should this work as I expect it to? How do I fix it?

Upvotes: 0

Views: 187

Answers (1)

omeralper
omeralper

Reputation: 10114

you just wrote the (showCommentsToggle) part in the wrong place. 

<comment-meta [comment]="comment" (showCommentsToggle)="toggleRepliesListener($event)"></comment-meta>

Upvotes: 1

Related Questions