📖
Maissen's Grimoire
  • Maissen's Grimoire
  • Html and css grimoire
    • HTML5 Periodical Table
    • HTML Cheat Sheet
    • CSS Cheatsheets
  • Javascript Grimoire
    • JavaScript Cheat Sheet
      • Javascript Array in depth
      • Tagged Template Literals
      • Guard Clauses - The Best Way To Write Complex Conditional Logic
      • JavaScript Optional Chaining
      • JavaScript Null Coalesce
      • What Are Magic Numbers And Why Are They Bad
      • ES6/ECMAScript2015 Cheatsheet
      • First-class and Higher Order Functions: Effective Functional JavaScript
    • Useful JavaScript Tips, Tricks and Best Practices
    • Bits of code
    • Useful JavaScript libraries
      • Components
      • Animation
      • Maps
      • Helpers
      • Presentations
      • Charts
      • Games
      • Audio
      • Images
      • Video
    • Js the right way
  • Angular Grimoire
    • Angular doc
    • Getting Started
    • Angular clean architecture
    • Angular Cheat Sheet
    • TypeScript Cheat Sheet
    • My Favorite Tips and Tricks in Angular
    • NgRx: tips & tricks
    • Bits of code
      • Execute Multiple HTTP Requests in Angular
      • Authentification
        • Angular 8 JWT Authentication with HttpInterceptor and Router
      • Integrations
        • Spring Boot
          • Rest Example
            • Angular,Spring Boot,Spring Data and Rest Example(CRUD)
          • Authentification
            • Angular, Spring Boot: JWT Authentication with Spring Security example
            • Angular Spring Boot Security Oauth2
              • Spring Boot OAUTH2 Role-Based Authorization
              • Spring Boot Security Google Oauth
              • Spring Security OAuth2 User Registration
    • Most used dependency
  • Node Grimoire
    • Express.js 4 Cheatsheet
    • Useful Dependencies
    • How To Use And Write Express Middleware
    • Node.js with SQL databases
      • Node.js Token Based Authentication & Authorization example
      • Node.js Rest APIs example with Express, Sequelize & MySQL
      • Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize
      • Sequelize
        • Sequelize Many-to-Many Association example – Node.js & MySQL
        • Sequelize One-to-Many Association example with Node.js & MySQL
    • Node.js with NOSQL databases
      • Node.js + MongoDB: User Authentication & Authorization with JWT
      • Node.js, Express & MongoDb: Build a CRUD Rest Api example
      • MongoDB One-to-One relationship tutorial with Mongoose example
      • MongoDB One-to-Many Relationship tutorial with Mongoose examples
      • MongoDB Many-to-Many Relationship with Mongoose examples
  • Upload files
    • How to upload multiple files in Node.js
    • Upload & resize multiple images in Node.js using Express, Multer, Sharp
    • Upload/store images in MySQL using Node.js, Express & Multer
    • How to upload/store images in MongoDB using Node.js, Express & Multer
  • React Grimoire
    • React Doc
    • React Grimoire
    • React Cheat Sheet
  • spring boot Grimoire
    • Getting started
    • Spring Boot, Spring Data JPA – Rest CRUD API example
    • Spring Boot Token based Authentication with Spring Security & JWT
  • Mongo Grimoire
    • MongoDb-Mongoose Cheat Sheet
  • Development tools
    • Design Patterns
  • maissen_grimoire
Powered by GitBook
On this page
  • SubSink
  • Installation
  • Angular examples
  • Get results of chained observables in subscription

Was this helpful?

  1. Angular Grimoire

Bits of code

SubSink

RxJS subscription sink for unsubscribing gracefully in a component.

SubSink is a dead simple class to absorb RxJS subscriptions in an array.

Call unsubscribe() to unsubscribe all of them, as you would do in your component library's unmount/onDestroy lifecycle event.

Installation

npm install subsink --save

Angular examples

There are 2 main ways to use the SubSink: the "easy" way and the "add/array" way.

RxJS supports adding subscriptions to an array of subscriptions. You can then unsubscribe directly from that array. If this appeals to you, then feel free to use it. If you prefer the technique with SubSink using the setter (aka easy) syntax below, then use that. Either way, no judgments are made. This is entirely up to you to decide.

Easy Syntax

Example using the sink property to collect the subscriptions using a setter.

export class SomeComponent implements OnDestroy { 
 private subs = new SubSink();  
  ...  
  this.subs.sink = observable$.subscribe(...);  
  this.subs.sink = observable$.subscribe(...);  
  this.subs.sink = observable$.subscribe(...);  
  ...   
  // Unsubscribe when the component dies  
  ngOnDestroy() {    
  this.subs.unsubscribe();  
   }
  }

The Array/Add Technique

Example using the .add technique. This is similar to what RxJS supports out of the box.

export class SomeComponent implements OnDestroy {
  private subs = new SubSink();
     ...
        this.subs.add(observable$.subscribe(...));
        this.subs.add(observable$.subscribe(...));
// Add multiple subscriptions at the same time  
this.subs.add(     
       observable$.subscribe(...),
       anotherObservable$.subscribe(...)  
       );    
       ...   
// Unsubscribe when the component dies  
ngOnDestroy() {
    this.subs.unsubscribe();
      }}

Get results of chained observables in subscription

this.Service1 
    .getSomething() 
    .pipe( 
        switchMap(
            result1 => this.service2.getAnotherSomething()
                .pipe(map(result2 => ({ result1, result2 }))), 
                ),
         ) 
                .subscribe(results => {
                 console.log(results.result1,results.result2) 
                     }) 
PreviousNgRx: tips & tricksNextExecute Multiple HTTP Requests in Angular

Last updated 1 year ago

Was this helpful?