# ngx-subscribable

> ![build: passing](https://raw.githubusercontent.com/PavelDymkov/ngx-subscribable/master/badges/build.svg) ![test: passing](https://raw.githubusercontent.com/PavelDymkov/ngx-subscribable/master/badges/test.svg) ![license: MIT](https://raw.githubusercontent

Latest version **1.0.3** (published 2021-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-subscribable
pnpm add ngx-subscribable
yarn add ngx-subscribable
bun add ngx-subscribable
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-11-27 |
| First published | 2020-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pavel Dymkov |
| Maintainers | paveldymkov |
| Keywords | angular, unsubscribe, rxjs |

## Links

- npm: https://www.npmjs.com/package/ngx-subscribable
- Repository: https://github.com/PavelDymkov/ngx-subscribable
- Homepage: https://github.com/PavelDymkov/ngx-subscribable#readme
- Issues: https://github.com/PavelDymkov/ngx-subscribable/issues
- npm.io page: https://npm.io/package/ngx-subscribable

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 1.0.3 (latest) — 2021-11-27
- 1.0.1 — 2020-12-16
- 1.0.0 — 2020-09-06

## README

# NgxSubscribable

![build: passing](https://raw.githubusercontent.com/PavelDymkov/ngx-subscribable/master/badges/build.svg)
![test: passing](https://raw.githubusercontent.com/PavelDymkov/ngx-subscribable/master/badges/test.svg)
![license: MIT](https://raw.githubusercontent.com/PavelDymkov/ngx-subscribable/master/badges/license.svg)

A subscribable means that the component (or the directive) will have an array of the subscriptions.
The library provides to the class a `subscriptions` property. You can push subscriptions to this property.
Just extends `SubscribableComponent`.

Example:

```ts
import { Component, OnInit } from "@angular/core";
import { SubscribableComponent } from "ngx-subscribable";

@Component({
    selector: "my-component",
    template: `Content`,
})
export class MyComponent extends SubscribableComponent implements OnInit {
    constructor(private someService: SomeService) {
        // don't forget to call `super` if using a constructor
        super();
    }

    ngOnInit(): void {
        // property that SubscribableComponent provided
        this.subscriptions = [
            this.someService.observable
                .pipe(
                    finalize(() => {
                        // will be calling when a component will destroyed.
                    }),
                )
                .subscribe(),
        ];
    }
}
```

Don't forget to call `ngOnDestroy.super()` if define `ngOnDestroy`:

```ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { SubscribableComponent } from "ngx-subscribable";

@Component({
    selector: "my-component",
    template: `Content`,
})
export class MyComponent
    extends SubscribableComponent
    implements OnInit, OnDestroy
{
    constructor(private someService: SomeService) {}

    ngOnInit(): void {
        this.subscriptions = [this.someService.observable.subscribe()];
    }

    ngOnDestroy(): void {
        super.ngOnDestroy(); // <<< !!!

        // do something
    }
}
```

Using a directive:

```ts
import { Directive, OnInit } from "@angular/core";
import { SubscribableDirective } from "ngx-subscribable";
import { from } from "rxjs";

@Directive({ selector: "[directive]" })
export class MyDirective extends SubscribableDirective implements OnInit {
    ngOnInit(): void {
        this.subscriptions = [from(document, "click").subscribe()];
    }
}
```

Using a service:

```ts
import { Injectable } from "@angular/core";
import { SubscribableService } from "ngx-subscribable";
import { from } from "rxjs";

@Injectable()
export class TestService extends SubscribableService {
    constructor() {
        super();

        this.subscriptions = [from(document, "click").subscribe()];
    }
}
```

---
_Source: https://npm.io/package/ngx-subscribable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._