Angular callback after observable next

Question

I need to be able to execute a call back after Observable.next() has been processed.

I have a component "A" that has a subject send notifications using Subject.next(). I have a component "B" that has subscribed to Subject.asObservable() in order to perform code.

When A trigger next to B, I would like to perform some code once Subject.next() has been executed.

Service

 private submitSubject = new Subject<String>();
 private submitObservable = this.submitSubject.asObservable();

Component A

 public onClickSubmit():void {
      ....
      this.xxxxService.executeSubmit()
  }

Component B

ngOnInit() {
        // Subscribe to parent Submit button
        this.subscription = this.xxxService.getSubmitObservable().subscribe(value => {...} );
  }

I would like to be able to do something like

obervable.next().subscribe(e => {})

Answer 1

In fact I saw only 2 solutions - Having 2 sujects/obersvables : 1 for execution, 1 for result - Having 1 subject/obersvable : using subject.next to notify and subject.complete to achieve, but in this case you have to re instantiate subject/obersvable for each execution.

1) Solution 1

Component A (parent) subscribes to resultNextSubject (on 'next' method)

Component B (child) subscribes to nextSubject (on 'next' method)

In Component A when you click on "Next" button it calls nextSubject.next to notify component B for submit (validation save)

Component B perfom submit and call resultNextSubject.next() to notify result to component A Component A receive resultNext notification and route to another component for display etc..

Component A (parent)

@Component({
  selector: 'pi-xxx',
  providers: [xxxService],
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.scss']
})
export class xxxAComponent implements OnInit, OnDestroy {

  constructor(private router: Router, private xxxService: XxxService) {}

  ngOnInit() {  
    ...    
      // Subscribe to child notification to navigate to a tab
      this.subscription = this.xxxService.getNextResultObservable().subscribe((value) => {
    ..routing..);
     }
  }

  ngOnDestroy(): void {
      this.subscription.unsubscribe();
  }

  public onClickNext(): void {
      ...
      this.xxxService.executeNext();
  }

}

Component B (child)

@Component({
  selector: 'pi-tab2',
  templateUrl: './tab2.component.html',
  styleUrls: ['./tab2.component.scss']
})
export class Tab2Component implements OnInit, OnDestroy {

    private subscription:Subscription;

    constructor(private xxxService:XxxService) { }

    ngOnInit() {
        // Subscribe to parent Next button
        this.subscription = this.xxxService.getNextObservable().subscribe(value => {
            this.submit();
        });
    }

    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

    submit() {
      ...
      // Notify result to parent
      this.xxxService.getNextResultSubject().next();
    }

}

2) Solution 2

Component A (parent) subscribes to nextSubject (on 'complete' method)

Component B (child) subscribes to nextSubject (on 'next' method)

In Component A when you click on "Next" button it calls nextSubject.next to notify component B for submit (validation save)

Component B perfom submit and call nextSubject.complete() to notify result to component A

Component A receive resultNext (complete) notification and route to another component for display. But component A must do re instantiate subject and its oberservable before routing.

Component A

ngOnInit() {
  .... init
}

public onClickNext(): void {
      ....
          // Subscribe to wait for child result notification
          this.xxxService.nextObservable().subscribe({
              complete: () => {
                  // Must reset subject & observable before routing next child
                  this.xxxService.nextSubject =  new Subject();
                  this.xxxService.nextObservable = this.xxxService.nextSubject.AsObservable()
                  ....routing...
              }}
           );

          // Notify child
          this.xxxService.executeNext();
      }
  }

Component B

ngOnInit() {
            // Subscribe to parent Next button
            this.subscription = this.xxxService.getNextObservable().subscribe(value => {
                this.submit();
            });
        }

        ngOnDestroy(): void {
            this.subscription.unsubscribe();
        }

        submit() {
          ...
          // Notify result (complete) to parent
          this.xxxService.getNextSubject().complete();
        }