By onedkr


2018-02-16 10:38:24 8 Comments

I try to pass a form from my child component to his parent.

Child TS:

@Output() submit: EventEmitter<FormGroup> = new EventEmitter();

updateStream(): void {
    const body = {some data};

    // If I put this.submit.emit(this.form) here it works

    this.apiGatewayService.verifyKeys(body).subscribe(
       (res) => {
        console.log('SUCCESS verify : ', res);
        this.submit.emit(this.form); // doesn't work
      },
      (error) => {
        console.log('ERROR verify : ', error);
        this.disableLoader.emit(); // doesn't work
      });
}

The html :

<child (submit)="updateStream($event)"></child>

Parent TS :

 updateStream(form: formGroup): void {
    console.log('UPDATE');
  }

All my emits into subscribe doesn't work (console.log in parent composant not displayed). However outside the subscribe it works.

Have you an idea ?

EDIT

the problem is with the line this.apiGatewayService.verifyKeys(body). This call works perfectly (correct response), however the emit doesn't work. However, it works, if I mock this call like this :

updateStreamOut(): void {
    this.test().subscribe(
      (res) => {
        console.log('SUCCESS verify : ', res);
        this.submit.emit(this.lambdaForm); // Works
      },
      (error) => {
        console.log('ERROR verify : ', error);
        this.verifyError = true;
        this.disableLoader.emit(); // Works
      }
    );
  }

  test(): Observable<any> {
    return Observable.of({ status: 'ok' });
  }

Here my function verifyKeys :

verifyKeys(body): Observable<any> {
    const result = Observable.fromPromise(
      this.client.externalVerifyPost({}, body, config.additionalParams)
    );

    return this.handleResult.dispatchResponse(result, false);
  }

HandleResult service :

 dispatchResponse(result: Observable<any>, enableSnackbar: boolean = true) {
    return result
      .catch((error) => {
        const exception = this.getException(error);

        this.apiResponse.errorsHandler(exception);
        return Observable.throw(exception);
      })
      .mergeMap((res) => {
        if (enableSnackbar) {
          this.apiResponse.successHandler(res);
        }
        return Observable.of(res.data);
      });
  }

Maybe it gives you more informations.

1 comments

@onedkr 2018-02-16 13:49:06

I found my error. Indeed, when this.apiGatewayService.verifyKeys(body) was launch a loader was displayed.

My parent HTML was build like this :

<div *ngIf="!loader">
    <child ...></child
</div>

<div *ngIf="loader>
    My loader
</div>

So when my loader was display, my component was delete from the DOM and my "submit" event emitter was unsubscribe.

To prevent that, I use the angular property [hidden] instead of *ngIf. [Hidden] act like a display: none, and not delete my child component from the DOM.

Related Questions

Sponsored Content

15 Answered Questions

16 Answered Questions

[SOLVED] possible EventEmitter memory leak detected

2 Answered Questions

[SOLVED] Implement an error interceptor based on what is shown

1 Answered Questions

[SOLVED] Angular 6.1.1 - EventEmitter doesn't emit to parent component

  • 2018-08-03 04:13:28
  • Luca Brasi
  • 361 View
  • 0 Score
  • 1 Answer
  • Tags:   angular

6 Answered Questions

1 Answered Questions

[SOLVED] Angular 5 - Cannot resolve observable in Observable.catch()

2 Answered Questions

[SOLVED] Angular & RxJS - Combining Multiple XHR Service calls using .mergeMap

0 Answered Questions

Angular2 EventEmitter with last value

1 Answered Questions

[SOLVED] Subscribe to EventEmitter in Angular2 not working

0 Answered Questions

Angular2 EventEmitter Subscribe?

Sponsored Content