use eventEmitter.emit() in component's template

Question

Edit

I had a TemplateRef referenced with the same name in the HTML template !

<ng-template #eventEmitter>

Sorry about that, still keeping the question to reference the error code.

Old question

I was trying to use in a component's template something.component.html the emit() method of an EventEmitter instance as

<div (click)="eventEmitter.emit()">click me</div>

and defined in my component something.component.ts like

@Output() eventEmitter = new EventEmitter<any>();

and get the following error

"jit_nodeValue_3(...).emit is not a function"

I couldn't find any reference to this in the doc or guide and was curious about this behavior, does someone have a real explanation ?

Answer 1

Setting up an EventEmitter on an Output:

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

@Component({
    selector: 'demo',
    template: `<h1>Demo</h1>
    <button (click)="notify.emit('hello')">Notify</button>`
})
export class DemoComponent {
    @Output() notify = new EventEmitter<any>();
}

Subscribing to the event:

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `<h1>App</h1>
    <demo (notify)="receiveNotification($event)"></demo>`
})
export class AppComponent {
    notifications = new Array<any>();

    receiveNotification(notification: any) {
        this.notifications.push(notification);
    }
}

Full example in StackBlitz