Home > OS >  Angular TS subscribe method is marked as deprecated but is working fine
Angular TS subscribe method is marked as deprecated but is working fine

Time:11-09

I've written the function which shall everytime it is called get new data trough a service file.

The function looks like this:

onCarChange() {
 this.carService.getCarData(this.selectedCar).subscribe(
  async (response: CarData) => {
   if (response?.data === null) {
    this.showCarData = false;
   } else {
      this.showCarData = true;
   }
  },
  (error) => {
   this.showCarData = false
   console.error(error);
  }
};

My service.ts file looks like this:

getCarData(carId: string) {
 return this.http.get(API.carData.get(carId));
}

The function is working fine and as intended so no issues on that. But right now I'm trying to clean up my code and I've noticed that the subscribe method is crossed out and marked as deprecated. Does somebody know how to get rid of this? Do I need to reconstruct the function? And if yes what would it look like?

CodePudding user response:

You have to pass an observer object.

onCarChange() {
    this.carService.getCarData(this.selectedCar).subscribe({
        next: async (response) => {
            if (response?.data === null) {
                this.showCarData = false;
            } else {
                  this.showCarData = true;
            }
        }, error: (err) => {
            this.showCarData = false
            console.error(err);
        }
    });
};

CodePudding user response:

The way you are using is deprecated. You can read more here.

.subscribe({
   next: () => { ... }, // (required) nextHandler
   error: () => { ... }, // (required) errorHandler
   complete: () => {.. }, // (optional) completeHandler
})

So in your case use :

onCarChange() {
 this.carService.getCarData(this.selectedCar).subscribe({
    next: async (response) => {
        if (response?.data === null) {
            this.showCarData = false;
        } else {
              this.showCarData = true;
        }
    }, 
    error: (err) => {
        this.showCarData = false
        console.error(err);
    }
  })
};
  • Related