"Unsubscribing in Angular via a button click: A step-by

Question

"Unsubscribing in Angular via a button click: A step-by

I'm having trouble canceling a subscription for "device orientation" in Angular using (click) in HTML. I've tried multiple solutions but none seem to work. Does anyone have any ideas on how to fix this?

TS


// Watching the change in device compass heading
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')
};

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

angular typescript ionic-framework

Answer 1

Answer №1

Give this a shot:

Instead of simply storing the subscription, try to incorporate it in a way that prevents its loss during any subsequent assignments.

private subscription = new Subscription();

// Keep an eye on the device's compass heading changes
  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 has been clicked')
  };

    // Halt the observation of heading changes
    async stopOrientation() {
      this.subscription.unsubscribe();
      console.log('StopOrientation button has been clicked');
  };

Answer 2

Give this a shot:

Instead of simply storing the subscription, try to incorporate it in a way that prevents its loss during any subsequent assignments.

private subscription = new Subscription();

// Keep an eye on the device's compass heading changes
  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 has been clicked')
  };

    // Halt the observation of heading changes
    async stopOrientation() {
      this.subscription.unsubscribe();
      console.log('StopOrientation button has been clicked');
  };

Answer 3

Answer №2

Here is a solution that I found:

JavaScript

export class HomePage implements OnInit {

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

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

  ngOnInit() {
...
}

  }

  // Method to 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')
    };
    
    // Method to stop watching the device compass heading change
    stopOrientation() {
      this.subscription.unsubscribe();
      console.log('stopOrientation()')
    };

}

Answer 4

Here is a solution that I found:

JavaScript

export class HomePage implements OnInit {

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

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

  ngOnInit() {
...
}

  }

  // Method to 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')
    };
    
    // Method to stop watching the device compass heading change
    stopOrientation() {
      this.subscription.unsubscribe();
      console.log('stopOrientation()')
    };

}

"Unsubscribing in Angular via a button click: A step-by

Answer №1

Answer №2

Similar questions

Tips for monitoring server response in Angular 2

Searching with Mat-autocomplete across multiple fields simultaneously

Encountered an error while trying to access the 'touched' property of undefined within Angular6 reactive forms

What is the process for setting up a signup and sign-in page in Angular 12 while incorporating local storage for authentication?

How to update the tsconfig.json file within a VS2019 project using MSBuild?

What is the best way to retrieve the URL query parameters in a Node.js environment?

Link the Angular Material Table to a basic array

What methods can I use to analyze the integrity of the data's structure?

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Bringing in TypeScript definitions for gridster

Angular findIndex troubleshooting: solutions and tips

Issue with running gulp ser on first attempt in SPFX

clicking a table row will activate the *ngFor directive

Why is my root page not dynamic in Next.js 13?

Working with an array of objects with varying shapes and validating them

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

Combining React Context and Typescript using a Custom Hook

Restricting enum type to only one member

Capacitor - Error: Trying to access the property 'getToken' on an undefined object

Should the PHP interface be exported to a Typescript interface, or should it be vice versa?