README
@fullerstack/ngx-subify
A simple subscription manager library for Angular applications
Overview
Description
Angular applications may rely heavily on RxJS in order to implement reactive components and services. Maintaining and tracking of all active subscriptions may be overwhelming at times. As such, Subify attempts to streamline subscription and make the cleanup easier.
@fullerstack/ngx-subify attempts to streamline the subscription manager of your application, while promoting DRY DRY.
How to install
npm i @fullerstack/ngx-subify |OR| yarn add @fullerstack/ngx-subify
How to use
There are three ways to track and cancel your subscriptions.
1 - Subscription Cleanup Manager
2 - Subscription Cleanup Service
3 - Subscription Cleanup Decorator
SubifyManager
1 - Auto Canceling Subscription via SubifyManager Class
// in your component - Using SubManager
import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { SubManager } from '@fullerstack/subify';
@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent implements OnDestroy {
// instantiate a new subscribe manager
subMgr: SubManager = new SubManager();
constructor() {
// track a single subscription
this.subMgr.track = interval(1000).subscribe(num => console.log(`customSub1$ - ${num}`));
// track a list of subscriptions
this.subMgr.track = [
interval(1000).subscribe(num => console.log(`customSub2$ - ${num}`)),
interval(1000).subscribe(num => console.log(`customSub3$ - ${num}`));
]
}
ngOnDestroy() {
// unsubscribe all subscriptions
this.subMgr.unsubscribe();
}
}
2- Auto Canceling Subscription via SubService
SubService is a great way to let another ephemeral
service to handle the canceling of subscriptions. It works with classes of type Component
, Directive
& Pipe
.
// in your component - Using SubService
import { Component } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SubService } from '@fullerstack/subify';
@Component({
selector: 'home',
// an ephemeral service instance per component instance
providers: [SubService],
templateUrl: './home.component.html'
})
export class HomeComponent {
customSub$: Subscription;
constructor(readonly subService: SubService) {
// track a single subscription
this.subService.track = interval(1000).subscribe(num => console.log(`customSub1$ - ${num}`));
// track a list of subscriptions
this.subService.track = [
interval(1000).subscribe(num => console.log(`customSub2$ - ${num}`)),
interval(1000).subscribe(num => console.log(`customSub3$ - ${num}`));
]
// automatically gets cleaned up by SubService's OnDestroy
interval(3000)
.pipe(takeUntil(this.subService.destroy$))
.subscribe(num => console.log(`takeUntil - ${num}`));
}
}
3 - Auto Canceling Subscription Decorator
@SubifyDecorator() is a great way to enhance a class to better handle the canceling of subscriptions. It works with classes of type Component
, Directive
, Pipe
& Injectable
. The decorated class must also implement OnDestroy
even if unused.
// in your component - Using Subscribable
import { Component, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { SubifyDecorator } from '@fullerstack/subify';
@Component({
selector: 'home',
templateUrl: './home.component.html',
})
@SubifyDecorator()
export class HomeComponent implements OnDestroy {
customSub$: Subscription;
constructor() {
// must keep a reference to our subscription for automatic cleanup
this.customSub$ = interval(1000).subscribe((num) =>
console.log(`customSub$ - ${num}`)
);
}
// required even if unused. This is to prevent AOT tree shake ngOnDestroy of the decorated class
ngOnDestroy() {}
}
Advanced Usage
Auto Canceling Subscription Decorator (w/ takeUntil)
// in your component - Using SubifyDecorator
import { Component, OnDestroy } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SubifyDecorator } from '@fullerstack/subify';
@Component({
selector: 'home',
templateUrl: './home.component.html',
})
@SubifyDecorator({
// property used by takeUntil() - use destroy$ or any custom name
takeUntilInputName: 'destroy