How to unsubscribe in Angular by clicking button-CodePudding

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?

 // 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>

CodePudding user response：

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');
  };

CodePudding user response：

This worked for me:

export class HomePage implements OnInit {

  subscription: Subscription = new Subscription();
  orientation: any;

  constructor(
    private route: ActivatedRoute,
    private deviceOrientation: DeviceOrientation,
    ) { }

  ngOnInit() {
...
}

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

    var options = {
      frequency: 500,
    };

    this.subscription = this.deviceOrientation.watchHeading(options).subscribe( 
    (data: DeviceOrientationCompassHeading) => { this.orientation = data.magneticHeading.toFixed(2) },
    (error: any) => console.log(error)
    );
    console.log('button clicked')
    };
    
    stopOrientation() {
      // Stop watching heading change
      this.subscription.unsubscribe();
      console.log('stopOrientation()')
    };

}