"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

Using ngFormModel with Ionic 2

Transforming Angular 2 quickstart application for deployment on Google Cloud infrastructure

Can TypeScript be implemented within nuxt serverMiddleware?

How can we regularly retrieve data in Angular 5 using Observables, while also incorporating instant fetching with RxJs 5.x?

Presenting data in various formats

The Sequence of Import Statements in Angular 2

Issues with executing code within the react package for Yahoo Finance 2

Angular4 does not recognize this.form.get as a valid function

Troubleshooting deployment issues of an Angular 5 and ASP.NET Core 2.1 application on an nginx server

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

Implementing an All-Routes-Except-One CanActivate guard in Angular2

What does the (ERR! code ENOLOCAL npm ERR!) signify? Installation failed due to an error

Angular: Defining variables using let and var

Exploring the Power of TypeScript with NPM Packages: A Comprehensive Guide

What strategies can be utilized to manage a sizable data set?

Data binding with ngModel is contingent on certain conditions

How to store property transformation in Redux/ngrx

Troubleshooting CSS Issues in ASP.NET Boilerplate

Connecting the Telegram web app to Angular is a simple process that involves integrating the

What is the appropriate event type to pass to the onKeyPressed function in a React application utilizing MaterialUI and written with Typescript?