Output Event Emitter triggers only on ngOnInit

Question

I have parent and child component, from child need to trigger the parent component function.

Parent.component.ts

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

Parent.component.html

<app-project (uploaded)="loadData($event)" ></app-project>

child.component.ts

@Output() uploaded:EventEmitter<any> = new EventEmitter();

ngOnInit() {
    this.uploaded.emit('complete'); // Worked 
}

loadProject(){
    this.uploaded.emit('complete'); // Not triggering the parent function 
}

child.component.html

<button type="button" (click)="loadProject(project)" label="Load Project"></button>

Don't know what is the wrong in this, but workes from ngOnInit.

Calling the loadProject from child.component.html.

There is a function (editProject) in child.component.ts from there calling editProject(project: Project) { this.uploaded.emit('complete'); } — Govinda raj
Perhaps editing your question is a better idea because code in comments is hard to read. Please also add the information where editProject() is called from. — Günter Zöchbauer
I'm sure someMethod($event) will be called in both cases. How does someMethod() { ... } look like? — Günter Zöchbauer

Jota.Toledo Jota.Toledo · Accepted Answer · 2017-06-06T10:00:28

change:

child.component.ts

@Output() uploaded = new EventEmitter<string>();

ngOnInit() {
    this.uploaded.emit('complete'); // Worked 
}

loadProject(){
    this.uploaded.emit('complete'); // Not triggering the parent function 
}

child.component.html

<button type="button" (click)="loadProject()" label="Load Project"></button>

You were passing a string value to loadProject, but in child component there is no definition of loadproject that takes 1 parameter

Output Event Emitter triggers only on ngOnInit

1 Answers