How to unsubscribe in Angular by clicking button

Issue

I am trying to cancel a "device orientation" subscription in Angular using (click) in HTML. However for some reason it won't work. Anyone an idea for a solution?

TS

 // Watch the device compass heading change
  async watchOrientation() {

    var options = {
      frequency: 500,
    };

    this.orientation = this.deviceOrientation.watchHeading(options).subscribe( 
    (data: DeviceOrientationCompassHeading) => { this.orientation = data.magneticHeading.toFixed(2) },
    (error: any) => console.log(error)
    );
    console.log('watchOrientation button clicked')
  };

    // Stop watching heading change
    async stopOrientation() {
      this.orientation.unsubscribe()
      console.log('stopOrientation button clicked');
  };

HTML

    <ion-item>
      <ion-icon name="pin" slot="start"></ion-icon>
      <ion-label>ion-item in a card, icon left, button right</ion-label>
      <ion-button fill="outline" slot="end" (click)="watchOrientation()" >Start</ion-button>
    </ion-item>

    <ion-item>
      <ion-icon name="pin" slot="start"></ion-icon>
      <ion-label>ion-item in a card, icon left, button right</ion-label>
      <ion-button color="danger" fill="outline" slot="end" (click)="stopOrientation()" >Stop</ion-button>
    </ion-item>

Solution

Give it a try:

instead of storing the subscription, try to add so that we won't lose it on any other assignment.

private subscription : Subscription = new Subscription();

// Watch the device compass heading change
  async watchOrientation() {

    var options = {
      frequency: 500,
    };

    this.subscription.add(this.deviceOrientation.watchHeading(options).subscribe( 
      (data: DeviceOrientationCompassHeading) => { this.orientation = data.magneticHeading.toFixed(2) },
      (error: any) => console.log(error)
    ));
    console.log('watchOrientation button clicked')
  };

    // Stop watching heading change
    async stopOrientation() {
      this.subscription.unsubscribe();
      console.log('stopOrientation button clicked');
  };

Answered By - Ganesh