/TypeScript/Angular unsubscribe from observable

Angular unsubscribe from observable

//Please note that there are many ways to unsubscribe, this is one of them
import { Subscription } from 'rxjs';

private searchEventSubscription: Subscription;

export class someComponent OnInit, OnDestroy {

    constructor(private someService: SomeService) { }

    ngOnInit() {
      this.searchEventSubscription = this.someService.someMethod.subscribe(result => {  
        doSomething(result);
      });
    }

    ngOnDestroy() {
		this.searchEventSubscription.unsubscribe()
    }

Source: stackoverflow.com

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
    selector: 'app-books',
    templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
    private ngUnsubscribe = new Subject();

    constructor(private booksService: BookService) { }

    ngOnInit() {
        this.booksService.getBooks()
            .pipe(
               startWith([]),
               filter(books => books.length > 0),
               takeUntil(this.ngUnsubscribe)
            )
            .subscribe(books => console.log(books));

        this.booksService.getArchivedBooks()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(archivedBooks => console.log(archivedBooks));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

Source: stackoverflow.com

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

interface User {
  id: string;
  name: string;
  age: number;
}

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.scss'],
})
export class FoobarComponent implements OnInit, OnDestroy {
  private user: User = null;
  private destroy$ = new Subject();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<User>('api/user/id')
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.user = user;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();  // trigger the unsubscribe
    this.destroy$.complete(); // finalize & clean up the subject stream
  }
}

Source: stackoverflow.com

Similar codes

0 vote368 views1 answer
Contents links python jupyter
TypeScript
1 vote321 views1 answer
Nextjs waiting for compilation error
TypeScript
1 vote304 views1 answer
File C:\Users\skill\AppData\Roaming\npm\yarn.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
TypeScript
0 vote312 views1 answer
Sort even dont exists meta wordpress
TypeScript
0 vote335 views1 answer
How to combine types in typescript
TypeScript
2 votes323 views2 answers
Close mat dialog from component
TypeScript
2 votes314 views2 answers
How to find a combination of all elements in a python list
TypeScript
0 vote379 views1 answer
Tox install requirements constraints
TypeScript
0 vote327 views1 answer
What types of troop advancements were involved, and why were both needed in dday
TypeScript
0 vote318 views1 answer
How to check typescript version for my react-app
TypeScript