How to unsubscribe in this situation? Angular 2+?

Question

  public testArr: any = []; 
     getData() {
        this.dataS.getSensor().subscribe((data: any) => {
            this.testArr= data; 
        })
      }


this.testArr.unsubscribe()

How if my testArr is array ? Now is older then now?

score 5 · Accepted Answer · edited Feb 21 '20 at 19:45

You can only unsubcribe from an Observable, which is not the case with testArr.

// declare a subscription
subscription: Subscription = new Subscription();

getData() {
// reference your observable to the subscription
  this.subscription = this.dataS.getSensor().subscribe((data: any) => {
    this.testArr= data; 
      })
    }

// unsubscribe when the component gets destroyed
ngOnDestroy() {
  this.subscirption.unsubscribe();  
}

score 1 · Answer 2 · edited Oct 22 '21 at 18:11

Multiple Subscription variables can get out of hand very quick and can be messy.

A better approach would be to use a subject, this can be reused for every subscription as follows.

// Declare a subscription handler
private onDestroy$ = new Subject();

getData() {
    // here we will use the onDestroy$ Subject to automatically unsubscribe
    this.dataS.getSensor()
    .pipe(takeUntil(this.onDestroy$))
    .subscribe((data: any) => {
        this.testArr= data; 
    });
}

// complete the subject when the component gets destroyed to unsubscribe
ngOnDestroy() {
    this.onDestroy$.next();
    this.onDestroy$.complete();
}

With the latest angular, subscriptions using http are handled and cleaned up automatically, but it is in some scenarios it's still best practice to unsubscribe yourself as well.

This is my preferred method to unsubscribe because you can unsubscribe from a single variable, in this case 'onDestroy$', and everything making use of it will get unsubscribed too — Jayme, Oct 22 '21 at 10:21

score 0 · Answer 3 · answered Feb 21 '20 at 12:36

0

You could also use async pipe that unsubscribes automatically. https://angular.io/api/common/AsyncPipe

component.ts

 // use your type instead of any
 data$: Observable<any>;

 ngOnInit() {
   this.data$ = this.dataS.getSensor();
 }

template.ts

<div *ngIf="data$ | async as data">
  // now you can use data property as you want
</div>

answered Feb 21 '20 at 12:36

akushylun

151
1
5

data$ is the name of property. – akushylun Feb 21 '20 at 12:41
it is naming convention. here is a good answers https://stackoverflow.com/questions/37671700/angular2-style-guide-property-with-dollar-sign – akushylun Feb 21 '20 at 12:48
In brackets Observable you set a returning object – akushylun Feb 21 '20 at 12:52
1

yes exactly. When you make a request getSensor(), you get your model back. It will be your type in Observable – akushylun Feb 21 '20 at 12:54

score 0 · Answer 4 · answered Mar 10 '21 at 22:44

The normal way is: to define a subscription variable, assign the susbscribe result and unsubscribe on detroy method (of componnet).

@Component({ .... })
export class AppComponent implements OnInit, OnDestroy {  
  
  private subscription: Subscription = new Subscription();
  public testArr: any = []; 
  
  getData() {
        this.subscription =
          this.dataS.getSensor().subscribe((data: any) => {
            this.testArr= data; 
            })
      }


  ngOnDestroy() {
    this.subscirption.unsubscribe();   
  }
}

A variant to the above is to use the Add method.

this.subscription.Add ( this.dataS.getSensor().subscribe(...) );
this.subscription.Add ( this.Observable2.subscribe(...) );
this.subscription.Add ( this.Observable3.subscribe(...) );

and finally:

  ngOnDestroy() {
    this.subscirption.unsubscribe();   
  }

This allows to manage multiple susbcription in one subscription variable

On the other hand, there is an alternative that I have been experimenting with and it has worked for me:

@Component({ .... })
export class AppComponent implements OnInit, OnDestroy {  
  
  private subscription: Subscription = new Subscription();
  public testArr: any = []; 
  
  //Define an POO "old school" event
  private onDataArrive?: () => void
  
  ngOnInit() {
      //Assign the event, with unsubscribe method.
      this.onDataArrive = () =>
        {
          //unsubscribe
          this.subscription.unsubscribe();
        }
  }
  
  getData() {
        //Assign the subscription 
        this.subscription =
          this.dataS.getSensor().subscribe((data: any) => {
            this.testArr= data; 
            
            //if event is assigned, then call it
            if (this.onDataArrive) this.onDataArrive();
            
            })
      }

}

looks, a lite bit "more complex" than just unsubscribe at the onDestroy method... but, an observable is a thread listening permanently and this way can unsubscribe it as soon as response arrive, and not wait until the end of component life.

score 0 · Answer 5 · answered Oct 22 '21 at 08:02

There are below 5 ways to unsubscribe a component in angular, after it uses.

By Using unsubscribe() method with ngOnDestroy() lifehooks.
By Using Async pipe.
By using RxJs take* operator
By Creating a custom decorator.
By using TS lint. Please see the below link more about unsubscribing an Angular component 5-ways-to-unsubscribe-an-angular-component

score 0 · Answer 6 · answered Oct 22 '21 at 09:45

If you are using angular HttpClient there is no need to unsubscribe.

httpClient sends only one value and then complete.

Otherwise you can user a decoator that will unsubscribe from all observables when the component is destroyed https://github.com/NetanelBasal/ngx-auto-unsubscribe

@AutoUnsubscribe()
@Component({
 selector: 'app'
})

No Need of unsubscribe in these cases

In case of HttpClient calls because the observable emit one value (success or error) and complete automatically.
In case or ActivatedRoute subscription because the Router will destroy it when the component is destroyed automatically
use of Async pipe

How to unsubscribe in this situation? Angular 2+?

6 Answers6