Emit angular2 event from a typescript class that is **not** an angular component

Question

I am building an interactive web app, and the core part of my webpage is an angular component, interactionStage.component , which houses a typescript class InteractionStage.ts . The latter, as it's name implies, is a graphical "stage" which users can interact with, it listens for and responds to a number of mouse events which are important in the context of the stage.

Omitting unnecessary details, my interactionStage.component looks like this:

@Component({
    selector: 'interaction-stage',
    templateUrl: './interactionStage.component.html',
    styleUrls: ['./interactionStage.component.css'],
})
export class InteractionStage.component implements OnInit {
    private stage : InteractionStage;

    constructor(){
        this.stage = new InteractionStage();
    }

    catchImportantEvent($event) {
        console.log($event);
        //Do stuff with the event data
    }
}

There's not much to show, but just to give you some context, my InteractionStage class looks like this:

export class InteractionStage {

    constructor(){
        //initialize important stuff here
    }

    public emitImportantEvent() {
        //TODO: emit an event so that interactionStage.component receives it
    }
}

Given the nature of InteractionStage , it needs to be able to emit events when an action happens on it, for example to notify a user of something, display a modal, or to alter the DOM. These events need to be received by InteractionStage.component , and in the future, might need to be received by other angular components on the page.

The problem I'm facing is is emitting these events from InteractionStage . I know how to emit and catch events using angular components, by using the @Output notation. As a stab in the dark, I tried using that in my InteractionStage class:

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

export class InteractionStage {

    @Output importantEvent: EventEmitter<any> new EventEmitter();

    constructor(){
        //initialize important stuff here
    }

    public emitImportantEvent() {
        var importantData = "here is a very important string";
        this.importantEvent.emit(importantData);
    }
}

Then I tried to catch this event in my InteractionStage.component like this:

 <interaction-stage (importantEvent)=catchImportantEvent($event)></interaction-stage>

But, absolutely nothing happens. No event is received and nothing is logged to the console.

Am I doing something wrong, or is what I'm trying to do impossible? If it can't be done, how else can I send an event from a typescript file and have it caught by an angular component?

I realise I can pass a reference of InteractionStage.component into the constructor of InteractionStage , but I think that's a code smell - coupling that is unneccesary. The interaction stage should not know about the angular component that holds it.

Answer 1

@Component({
selector: 'interaction-stage',
    templateUrl: './interactionStage.component.html',
    styleUrls: ['./interactionStage.component.css'],
})
export class InteractionStageComponent implements OnInit {
    private stage : InteractionStage;
    @Output myEmitter: EventEmitter<any> = new EventEmitter<any>();

    constructor(){
        this.stage = new InteractionStage(myEmitter);
    }

    catchImportantEvent($event) {
        console.log($event);
        //Do stuff with the event data
    }
}

export class InteractionStage {

    constructor(private myEmitter: EventEmitter<any>){
        //initialize important stuff here
    }

    public emitImportantEvent() {
      this.myEmitter.emit("my data");
        //TODO: emit an event so that interactionStage.component receives it
    }
}

I also changed InteractionStage.component to InteractionStageComponent because the angularCLI generates it like that so I assume its a practice