Typescript Observable inheritance

Question

I'm doing some base classes to do common things and then call overridden methods in the child classes.

In the code bellow, I need to call this.doSomethingElse only after the user is update by user service.

this is in the base class:

public onSubmit() {
    this.beforeSubmit();
    this.submitForm().subscribe(() => {
      this.afterSubmit();
    });
  }

this is in the child class:

  public submitForm(): Observable<User> {
    this.userServices.update(formValues).subscribe((user: User) => {
      this.someChildAction();
      return ??? ?
    });
    return ????
  }

I'm not sure what to code in the ???? lines.

Have a look at my answer and try to avoid nested subscriptions. — profanis
– profanis, Commented Feb 13, 2019 at 23:35
@profanis, I can't use the first answer because I need to do some actions after the service update. The second answer calls doSomethingElse that child class does not know. I made some update in the question. — Beetlejuice
– Beetlejuice, Commented Feb 14, 2019 at 0:51

profanis · Accepted Answer · 2019-02-13 23:12:52Z

1

Return the observable from submitForm method without subscribing. You can then concat the observable using the concatMap operator.

public onSubmit() {
    this.doSomething();
    this.submitForm().concatMap(this.doSomethingElse.bind(this)).subscribe(() => {

    });
  }

 public submitForm(): Observable<User> {
    return this.userServices.update(formValues);
  }

OR

public onSubmit() {
    this.doSomething();
    this.submitForm().subscribe(() => {

    });
  }


  public submitForm(): Observable<User> {
    this.userServices.update(formValues).pipe(
      concatMap(this.doSomethingElse.bind(this)) // <-- the input of the doSomethingElse will be the response of the *update* method
     ).subscribe((user: User) => {
      // here you will have the response of the doSomethingElse
    });
  }

edited Feb 13, 2019 at 23:12

answered Feb 13, 2019 at 23:05

profanis

2,7513 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Beetlejuice · Accepted Answer · 2019-02-14 09:41:11Z

0

I accomplished this creating in the child class the afterSubmit() method, like this:

afterSubmit(user) {
  //do child stuff here
  super.afterSubmit(user);
}

submitForm(): Observable<Object> {
  return this.userServices.update(formValues);
}

in base class:

public onSubmit() {
  this.beforeSubmit();
  this.submitForm().subscribe(data => {
    this.afterSubmit(data);
  });
}

public afterSubmit(data) {
  //my common stuff here
}

answered Feb 14, 2019 at 9:41

Beetlejuice

4,45513 gold badges61 silver badges89 bronze badges

Collectives™ on Stack Overflow

Typescript Observable inheritance

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related