Unsubscribing to an observable in Angular

Question

When I'm pressing a button I get info from a server for a specific vehicle. This is done by subscribing to an observable. When I press on the same button again I would like to unsubscribe to the current "vehicleDetail" that I'm looking at (to avoid memory leakage) as Im inspecting the new data of another vehicle.

I'm using an VehicleDetail class, with the following properties:

export class VehicleDetail {
  id: number;
  name: string;
  alarm: Alarms[] | null;
  signalinfo: SignalInfo[];
  position: Position | null;
}

Here's my code in my .service.ts:

    getVehicleDetail(id: number): Observable<VehicleDetail> {
        const url = `${this.vehiclesUrl}/${id}/${'detail'}`;
        return this.http.get<VehicleDetail>(url).pipe(
          tap(_ => this.log(`fetched vehicle detail id=${id}`)),
          catchError(this.handleError<VehicleDetail>(`getVehicledetail id=${id}`))
        );
      }

and in my .component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as Leaflet from 'leaflet';

import { VehicleService } from '../vehicle.services';
import { VehicleDetail } from '../models/vehicle-detail';

.........

vehicleDetail: VehicleDetail;
private unsubscribe$ = new Subject();

.........



  getVehicleDetail(): Observable<VehicleDetail> {
    const details = this.vehicleService
      .getVehicleDetail(this.vehicleService.vehicleId);

    details.takeUntil(this.unsubscribe$).subscribe(data => {
      this.vehicleDetail = data;
    });
    return details;
  }

updateInfo(item): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
    this.vehicleService.vehicleId = item;
    console.log(this.vehicleService.vehicleId);
    this.getVehicleDetail().takeUntil(this.unsubscribe$).subscribe(() => {
      if (this.vehicleDetail.position) {
        this.setMap();
        return;
      }
      this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
        animate: true,
        duration: 4
      });
    });
  }

The error I get is from takeUntil and it says:

error TS2339: Property 'takeUntil' does not exist on type 'Observable'.

What am I doing wrong here?

what makes you think that not unsubscribing could cause a mem. leak? — Jota.Toledo
Isnt it a quite big flaw to have hundreds of subsciptions up at the same time @Jota.Toledo ? — maac

Daniel Caldera Daniel Caldera · Accepted Answer · 2018-07-04T10:29:09

A http request in which you don't create a socket don't need to unsuscribe the observable, it finalize to a completed state. And why don't you call directly the service from updateInfo with the id that you receive as param?

updateInfo(vehicleId: number): void {
    this.vehicleService.getVehicleDetail(vehicleId)
     .subscribe((data) => {
       this.vehicleDetail = data;
       if (this.vehicleDetail.position) {
         this.setMap();
         return;
       }
       this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
         animate: true,
         duration: 4
       });
     });
}

Unsubscribing to an observable in Angular

1 Answers