Jeka Jeka - 1 year ago 154
TypeScript Question

child component EventEmitter not working

I have CreateProjectComponent which is child component I need to close a div in Parent when closeModal is clicked

The template (html):

<div (click)="closeModal(true)"></div>

The component.ts

selector: "th-create-project",
templateUrl: "create-project.component.html",
styleUrls: ["create-project.scss"],
directives: [

export class CreateProjectComponent {
@Output() onVoted = new EventEmitter<boolean>();

public closeModal(agreed: boolean) {
console.log("vote() on CHILD")


The parent component

In the parents component template I have:

<div *ngIf="(isNewProjectVisible === true)" (onVoted)="receivedEvent()">

and in the parent component ts I have:

selector: "projects-component",
templateUrl: `client/+projects/projects.component.html`,
styleUrls: ["client/+projects/projects.scss"],
directives: [ProjectListComponent, SelectListComponent, CreateProjectComponent],
providers: [ProjectService, StateService, CreateProjectService],
export class ProjectsComponent extends MeteorComponent implements OnInit {

public receivedEvent() { //This method isn't being triggered!!!
this.isNewProjectVisible = false;
console.log("receivedEvent() on PARENT")


Answer Source

Instead of div, you need to specify the selector of the component you want to use:

<th-create-project *ngIf="isNewProjectVisible" (onVoted)="receivedEvent()">

Note, if you use div, Angular will not automatically instantiate an instance of CreateProjectComponent just because you are using one of its output properties – i.e., just becauase (onVoted) is in the parent template. Nor will Angular automatically instantiate an instance of your CreateProjectComponent because it is listed in the directives array. You have to specify it in your template using the selector, as shown above, in order to get an instance.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download