Event not emitting from observable

Question

Update: I tried adding this to the beginning of authToken() and the event emits just fine, so there is something happening inside of the subscribe event that is not allowing the event to emit?

@Output() tokenAcquired: EventEmitter = new EventEmitter();
...
authToken(authCode: string) {
this.tokenAcquired.emit("testing123");
...

I have written a component that emits a string in my subscribe to an observable provided by a service. Testing from another component with an emit without an observable shows that the parent component and HTML are receiving events just fine. It;'s just that then I attempt to emit from within my observable that I get no event emitting.

It seems that I cannot fire an emit inside of the subscribe event. Where is the proper place an emit based on data obtained by a subscription to an observable?

  @Output() tokenAcquired: EventEmitter = new EventEmitter();
  ...
  authToken(authCode: string) {
  this.authservice.spotifyGetToken(authCode).subscribe( data => {
   this.token = <AccessToken>data;
   console.log("Token Raw: " + this.token.access_token);
   this.tokenAcquired.emit("testing123");
},
  (err: HttpErrorResponse) => {
    console.log(err.message + ' : ' + err.status);
  });

HTML

  <app-auth #auth
            [code] = "authCode"
            (tokenAcquired)="receiveToken($event);">
  </app-auth>

Parent Componenet

  receiveToken($event) {
   console.log("receiveToken event fired!" + $event) 
   this.token = $event                                         
   localStorage.setItem('token', $event);
   console.log("Saved token object to local storage...");
  }

Not sure if this helps, but running in a debugger. After the event SHOULD have emitted, here is the status of the EventEmitter: Event Emitter after firing

You can emit from any place, your error has to be in another place. Are you sure you are loging on subscription success? — nicowernli
Have you checked without the typo (tokenAcquired)="receiveToken($event)" — Eldho
@nicowernli using a different component, I can emit to this just fine. <app-test (testEvent)="receiveToken($event);"> </app-test> works. — Ahack
@Eldho @nicowernli Thank you for the help. I think I found my issue. I was calling the child function from the parent component using: this.authChild.authToken(this.authCode); I guess this created a NEW instance of the child class? By changing the child function to use local vars and not class variables, the event does fire now. So it had something to do with calling the function from component code vs from the child HTML button. It works now, although I'm not clear on why. — Ahack

Ahack Ahack · Accepted Answer · 2018-02-20T18:08:35

Because I was calling a method in the child class directly using: @ViewChild('auth') authChild: AuthComponent;, I was (apparently) creating a new instance of the child class that was disconnected from the child instance linked in the Input/Output HTML template.

Instead of calling the child class directly, I instead implemented ngOnChange() in the child class to respond to update events within the child class itself. This solved all of my issues.

Event not emitting from observable

1 Answers