Destroy Angular 5 components when move to another menu

Question

I have a report component which have Behavior Subject subscription and it pull data from web api after .next call. When I am move to another page after report page, report component still alive and keeps sending calls to webApi.

How to destroy components after navigate to another or unsubscribe Behavior Subjects. More details. I have few report components, it renders different type of reports. One of the component is below

@destroyAllSubscribers()
    export class StandardReportComponent implements OnInit {

    public subscriptions: Subscription[] = [];
    reportData = [];
    showReport=false;
    constructor(private reportService: ReportService)
    {

        this.subscriptions.push(this.reportService.chartType.subscribe(chartType => {

        if (this.currentChart != ReportChartType.None){

         this.showReport=false;  //Used in *ngIf to show report HTML template
            this.reportService.getReportData().subscribe(result=>{
        this.reportData=result; 
        this.showReport=true; //Used in *ngIf to show report HTML template


    }

    }

    }
    }

I have destroy subscriber decorator which gets executed when component destroys,

Code:

export function destroyAllSubscribers() {
    return (targetComponent: any) => {
      targetComponent.prototype.ngOnDestroy = ngOnDestroyDecorator();

      function ngOnDestroyDecorator() {
        return function () {
          if (this.subscriptions != undefined)
          {
            this.subscriptions.forEach(subscription => {
              if (subscription instanceof Subscriber) {
                subscription.unsubscribe();
              };
            });
          }
        };
      }
    };
}

It should unsubscribe; however all subscription gets executed after navigate to other page as well.

Please post some code for your `ReportComponent` to make it clear. — SiddAjmera, Sep 19 '18 at 06:34
export class ReportComponent { constructor(private reportService: ReportService) this.chartService.currentDates.subscribe(date => { //Get data from web Api }); } } — dilipkumar katre, Sep 19 '18 at 06:36

score 0 · Answer 1 · answered Sep 19 '18 at 06:37

0

You can unsubscribe the Behavior Subjects at page destroy using OnDestroy life cycle hook like this

this.sub_State = this.stateService.showStateBehaviorSubject.subscribe((state: boolean) => {
            this.showState = state;
        });
ngOnDestroy() {
        this.sub_State .unsubscribe();
    }

answered Sep 19 '18 at 06:37

Hana Wujira

870
7
17

Thank you, I had tried this; however it doesn't work – dilipkumar katre Sep 19 '18 at 06:45

score 0 · Answer 2 · answered Sep 19 '18 at 06:37

Create a Subject property and take the subscription until it's destroyed in ngDestroy

class MyComponent {
  destroyed$ = new Subject();

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

  myMethod() {
   this.apiHelper.get('some/url')
     .pipe( takeUntil(this.destroyed$) )
     .subscribe(()=> {
       // do things
     });
  }
}

SiddAjmera · Answer 3 · 2018-09-19T06:38:56.677

0

Simply use async pipe to display the data on the template without having to subscribe to the BehaviorSubject.

this.data$ = this.reportService.behaviourSubjectObj

In your template:

{{ data$ | async | json }}

edited Sep 19 '18 at 06:38

answered Sep 19 '18 at 06:38

SiddAjmera

38,129
5
72
110

This won't close the subscription. It also limits what you can do, for example, if you have to map the data or store a property in your component, this won't allow you to do either. – Baruch Sep 19 '18 at 06:38
Nobody's stopping him from calling map on the `behaviorSubjectObj` in the Component. And you sure about the first point? – SiddAjmera Sep 19 '18 at 06:42
I guess you're right, forgot about operators for a second. My bad. – Baruch Sep 19 '18 at 12:53

score 0 · Answer 4 · answered Sep 19 '18 at 07:28

Use ComphonentRef , if you want to destroy it from parent then follow the below code

@ViewChild(ChildComponent, { read: ComponentRef }) childComponentRef: ComponentRef;

the call

this.childComponentRef.destroy()

function in an event of parent .

refer this link

Destroy Angular 5 components when move to another menu

4 Answers4