Cancel background process when leaving a component to another?

Question

I am using this libray:

https://github.com/VadimDez/ng2-pdf-viewer

I have created a repository with an example of my problem.

https://github.com/YeisonVelez11/pdf

I am generating a pdf, and this works well. but if the pdf has not finished loading and I navigate to another component, I get an error.

Basically when I go back to a preview, I get a problem because the pdf that is being loaded can not be canceled. I do not know what trick I can do to get out of the document view at any time.

  <pdf-viewer [src]="archivo_adjunto"
              *ngIf="archivo_adjunto"
              [render-text]="false"
              [original-size]="true"
              [page]="1"
              [autoresize]="true"
              [show-all]="true"
              style="display: block;"
              (page-rendered)="pageRendered($event)"
  ></pdf-viewer>

ionViewDidLoad() {
this.archivo_adjunto="./assets/documents/Resumen Ejecutivo Autoevaluacion.pdf"

}

This is done in Ionic, but the functionality is in Angular.

Answer 1

In large-scale apps or in components that deal with bunch of observables or subjects or BehaviorSubjects, it is good practice to unsubscribe the observables when you are leaving the component in order to prevent problems like memory leaks or slowing down system.

 ngOnDestroy(){
   this.ObservableOrSubsject1$.unsubscribe();
   this.ObservableOrSubsject2$.unsubscribe();
   ....
 }

Also do not forget to implement OnDestroy to the class.

export MyComponent implements OnInit, OnDestroy

There is another good way that I actually like and you can use while dealing with subscriptions; in which you can provide a subject Like:

private onDestroy$: Subject = new Subject();

and when using any observable (e.g: mapping or subscribing) pipe with takeUntil:

ngOnInit(){
   this.ObservableOrSubsject1
     .pipe(takeUntil(this.onDestroy$))
     .subscribe((result: IResult) => {
       this.result= Object.assign({}, result);
   });

and in ngOnDestroy just pass "this.onDestroy$.next()":

ngOnDestroy(){
   this.onDestroy$.next();
 }

Again, Do not forget to implement OnDestroy to the class.

At the end, I recommend using Ngrx/Store and Ngrx/Effects to manage your states and unify the events in your application; which will save you from lots of headaches and keeps your application in an standard architecture.