Angular 2 version used: 2.0.0-alpha.44

I am trying to emit a Output signal from a ponent. I followed the Angular docs here .Below is the code of my ponent

@Component({
    selector: 'summary'
})
@View({
    directives: [NgFor, NgIf, ROUTER_DIRECTIVES, LogoutComponent, BarChartDirective, SunburstChartDirective],
    templateUrl: 'view/summary-ponent.html'
})
export class SummaryComponent {
    @Output() loadSummary: EventEmitter = new EventEmitter();
    project: Project;
    data: any;

    constructor(public http: Http,
            public router: Router,
            public xxxGlobalService: XXXGlobalService) {
        console.log("SummaryComponent: Created");
        this.getSummary()  
    }

    getSummary() {
        this.project = this.xxxGlobalService.getOpenedProject();
        var url = "/project_summary?username="+ this.xxxGlobalService.getUser().name + "&project_id=" + this.project.id;
        this.http.get(url)
                 .map(res => res.json())
                 .subscribe(
                     data => this.extractData(data),
                     err => this.logError(err),
                () => console.log('SummaryComponent: Successfully got the summary')
        );
    }

    extractData(data) {
        this.data = data;
        console.log("SummaryComponent: Emitting loadSummary event");
        this.loadSummary.next("event");
    }
}

However i get error saying "TypeError: router_1.EventEmitter is not a function" when i try to allocate the EventEmitter (below line)

@Output() loadSummary: EventEmitter = new EventEmitter();

I checked the link and modified the line to look like

@Output() loadSummary: EventEmitter;

But the loadSummary seems to be undefined throughout. How to emit the output signal ? Please help

Angular 2 version used: 2.0.0-alpha.44

I am trying to emit a Output signal from a ponent. I followed the Angular docs here .Below is the code of my ponent

@Component({
    selector: 'summary'
})
@View({
    directives: [NgFor, NgIf, ROUTER_DIRECTIVES, LogoutComponent, BarChartDirective, SunburstChartDirective],
    templateUrl: 'view/summary-ponent.html'
})
export class SummaryComponent {
    @Output() loadSummary: EventEmitter = new EventEmitter();
    project: Project;
    data: any;

    constructor(public http: Http,
            public router: Router,
            public xxxGlobalService: XXXGlobalService) {
        console.log("SummaryComponent: Created");
        this.getSummary()  
    }

    getSummary() {
        this.project = this.xxxGlobalService.getOpenedProject();
        var url = "/project_summary?username="+ this.xxxGlobalService.getUser().name + "&project_id=" + this.project.id;
        this.http.get(url)
                 .map(res => res.json())
                 .subscribe(
                     data => this.extractData(data),
                     err => this.logError(err),
                () => console.log('SummaryComponent: Successfully got the summary')
        );
    }

    extractData(data) {
        this.data = data;
        console.log("SummaryComponent: Emitting loadSummary event");
        this.loadSummary.next("event");
    }
}

However i get error saying "TypeError: router_1.EventEmitter is not a function" when i try to allocate the EventEmitter (below line)

@Output() loadSummary: EventEmitter = new EventEmitter();

I checked the link and modified the line to look like

@Output() loadSummary: EventEmitter;

But the loadSummary seems to be undefined throughout. How to emit the output signal ? Please help

• javascript
• angular

• 2 EventEmitter must be imported from angular2/angular2 not from angular2/router. – Eric Martinez Commented Nov 19, 2015 at 13:57
• @EricMartinez. Thanks a lot. It worked. – Prakash Shanbhag Commented Nov 19, 2015 at 15:22
• For Angular2 beta 3 use import EventEmitter from 'angular2/core' – Mike Argyriou Commented Feb 10, 2016 at 18:54

1 Answer 1

As of beta.0 (and maybe earlier), EventEmitter is now in angular2/core.

Emit an event using emit():

@Output() loadSummary: EventEmitter<any> = new EventEmitter();
...
this.loadSummary.emit("event");