How to use @ngneat/until-destroy - 10 common examples

it('should complete the stream on provider', () => {
    // Arrange
    @UntilDestroy()
    @Injectable()
    class MockService {
      disposed = false;

      constructor() {
        new Subject()
          .pipe(
            untilDestroyed(this),
            finalize(() => {
              this.disposed = true;
            })
          )
          .subscribe();
      }
    }

it('should unsubscribe from the component property', () => {
    // Arrange
    @UntilDestroy({ checkProperties: true })
    @Component({ template: '' })
    class MockComponent {
      disposed = false;

      subscription = new Subject()
        .pipe(
          finalize(() => {
            this.disposed = true;
          })
        )
        .subscribe();
    }

    // Act
    TestBed.configureTestingModule({
      declarations: [MockComponent]

it('should unsubscribe from the directive property', () => {
    // Arrange
    @Component({
      template: '<div></div>'
    })
    class MockComponent {}

    @UntilDestroy({ checkProperties: true })
    @Directive({ selector: '[test]' })
    class MockDirective {
      disposed = false;

      subscription = new Subject()
        .pipe(
          finalize(() =&gt; {
            this.disposed = true;
          })
        )
        .subscribe();
    }

    // Act
    TestBed.configureTestingModule({
      declarations: [MockComponent, MockDirective]

import { Directive } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UntilDestroy } from '@ngneat/until-destroy';
import { interval, of } from 'rxjs';
import { switchMap, catchError, finalize } from 'rxjs/operators';

@UntilDestroy({ checkProperties: true })
@Directive({ selector: '[http]' })
export class HttpDirective {
  subscription = interval(2000)
    .pipe(
      switchMap(() =>
        this.http
          .get('https://jsonplaceholder.typicode.com/users')
          .pipe(catchError(() => of([])))
      ),
      finalize(() => console.log('HttpDirective stream has completed'))
    )
    .subscribe(response => {
      console.log('HttpDirective got such response via HTTP: ', response);
    });

  constructor(private http: HttpClient) {}

import { Component, OnDestroy } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { fromEvent } from 'rxjs';
import { pluck, debounceTime, finalize } from 'rxjs/operators';

import { IntervalService } from './interval.service';

@UntilDestroy({ checkProperties: true })
@Component({
  selector: 'app-interval',
  templateUrl: './interval.component.html'
})
export class IntervalComponent implements OnDestroy {
  valueFromIntervalService = 0;

  subscription = fromEvent(document, 'mousemove')
    .pipe(
      debounceTime(200),
      pluck('clientX'),
      finalize(() => console.log('IntervalComponent fromEvent stream has completed'))
    )
    .subscribe(clientX => {
      console.log(`Mouse clientX position is ${clientX}`);
    });

import { Component } from '@angular/core';
import { UntilDestroy } from '@ngneat/until-destroy';
import { fromEvent } from 'rxjs';
import { pluck, finalize } from 'rxjs/operators';

@UntilDestroy({ arrayName: 'subscriptions' })
@Component({
  selector: 'app-document-click',
  templateUrl: './document-click.component.html'
})
export class DocumentClickComponent {
  clientX = 0;

  subscriptions = [
    fromEvent(document, 'click')
      .pipe(
        pluck('clientX'),
        finalize(() => console.log('DocumentClick fromEvent stream has completed'))
      )
      .subscribe(clientX => {
        console.log(`You've clicked on the document and clientX is ${clientX}`);
        this.clientX = clientX;

constructor() {
    this.intervalService.interval$
      .pipe(
        untilDestroyed(this),
        finalize(() =>
          console.log('IntervalComponent intervalService.interval$ stream has completed')
        )
      )
      .subscribe(value => {
        console.log(`IntervalService emitted value inside component ${value}`);
        this.valueFromIntervalService = value;
      });
  }

constructor() {
    interval(1000)
      .pipe(untilDestroyed(this, 'destroy'))
      .subscribe(value => {
        console.log(`IntervalService emits value ${value}`);
        this.interval$.next(value);
      });
  }

constructor() {
        new Subject()
          .pipe(
            untilDestroyed(this),
            finalize(() => {
              this.disposed = true;
            })
          )
          .subscribe();
      }
    }

constructor() {
        new Subject()
          .pipe(
            untilDestroyed(this),
            finalize(() => {
              this.disposed = true;
            })
          )
          .subscribe();
      }
    }