Using EventEmitter emit does not execute function

Question

Hi I am trying to create a loadding-box component using event emitters here is what I have so far:

I created an http.service threw which all http calls pass threw:

@Injectable()
export class HttpService {
    private http: Http;

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

    constructor(http: Http) {
        this.http = http;
    }

    public get(url: string): Observable<Response> {
        this.ajaxStarted.emit(url);

        return this.http.get(url);
    }
}

I have created an LoadingBoxComponent with the following code:

@Component({
    selector: 'loading-box',
    templateUrl: 'app/common/components/loading-box.view.html',
    styleUrls: ['app/common/components/loading-box.style.css']
})
export class LoadingBoxComponent {
    public isLoadingBoxHidden: boolean = true;

    public showLoadingBox(event: any) {
        this.isLoadingBoxHidden = false;
    }
}

This is app/common/components/loading-box.view.html:

<div class="loading-box-container" 
     (ajaxStarted)="showLoadingBox($event)" 
     [ngClass]="{hidden: isLoadingBoxHidden }">
    <div class="loading-box-shadow"></div>
    <div class="loading-box-element">
        <i class="fa fa-spinner fa-lg fa-spin"></i>
    </div>
</div>

I am not posting here couse I consider it irrelevat to the current question.

What I expect here to happen is whenever this.ajaxStarted.emit(url) gets called I expect the showLoadingBox function to be executed from LoadingBoxComponent.

What is happening is that this.ajaxStarted.emit(url) gets executed but showLoadingBox does not get reached.

What am I doing wrong?

Günter Zöchbauer · Accepted Answer · 2016-03-10T11:36:43.437

The @Output() xxx:EventEmitter; needs to be in the LoadingBoxComponent not in some service.

@Injectable()
export class HttpService {
    private http: Http;

    ajaxStarted: EventEmitter<any> = new EventEmitter();

    constructor(http: Http) {
        this.http = http;
    }

    public get(url: string): Observable<Response> {
        this.ajaxStarted.emit(url);

        return this.http.get(url);
    }
}


@Component({
    selector: 'loading-box',
    templateUrl: 'app/common/components/loading-box.view.html',
    styleUrls: ['app/common/components/loading-box.style.css']
})
export class LoadingBoxComponent {
    @Output() ajaxStarted: EventEmitter<any> = new EventEmitter();

    constructor(http:HttpService) {
      http.ajaxStarted.subscribe(this.ajaxStarted.edmit);
    }

    public isLoadingBoxHidden: boolean = true;

    public showLoadingBox(event: any) {
        this.isLoadingBoxHidden = false;
    }
}

You can trigger in the service but you can't declaratively bind to it. See my updated answer. — Günter Zöchbauer, Mar 10 '16 at 11:37
See also http://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2/35568924#35568924 `EventEmitter` should only used for `@Output()`s in components and not in services. Use `Observable` or `Subject` instead. — Günter Zöchbauer, Mar 10 '16 at 11:39

Using EventEmitter emit does not execute function

1 Answers1