title: Unsubscribing to an observable in Angular
body: <p>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.</p>
  
  <p>I'm using an VehicleDetail class, with the following properties:</p>
  
  <pre><code>export class VehicleDetail {
    id: number;
    name: string;
    alarm: Alarms[] | null;
    signalinfo: SignalInfo[];
    position: Position | null;
  }
  </code></pre>
  
  <p>Here's my code in my .service.ts:</p>
  
  <pre><code>    getVehicleDetail(id: number): Observable&lt;VehicleDetail&gt; {
          const url = `${this.vehiclesUrl}/${id}/${'detail'}`;
          return this.http.get&lt;VehicleDetail&gt;(url).pipe(
            tap(_ =&gt; this.log(`fetched vehicle detail id=${id}`)),
            catchError(this.handleError&lt;VehicleDetail&gt;(`getVehicledetail id=${id}`))
          );
        }
  </code></pre>
  
  <p>and in my .component.ts:</p>
  
  <pre><code>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&lt;VehicleDetail&gt; {
      const details = this.vehicleService
        .getVehicleDetail(this.vehicleService.vehicleId);
  
      details.takeUntil(this.unsubscribe$).subscribe(data =&gt; {
        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(() =&gt; {
        if (this.vehicleDetail.position) {
          this.setMap();
          return;
        }
        this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
          animate: true,
          duration: 4
        });
      });
    }
  </code></pre>
  
  <p>The error I get is from takeUntil and it says:</p>
  
  <blockquote>
    <p>error TS2339: Property 'takeUntil' does not exist on type
    'Observable'.</p>
  </blockquote>
  
  <p>What am I doing wrong here?</p>