You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Destroyable is an abstract class that implements the `OnDestroy` life-cycle hook in Angular, and when the hook is triggered an observable
8
-
property named `destroyed$` will emit once and then complete.
7
+
Destroyable is an abstract class which implements the `OnDestroy` life-cycle hook in Angular, and when the hook gets triggered a protected observable
8
+
named `_destroyed$` will emit once and then complete.
9
9
10
-
The usage of `takeUntil(destroyed$)` is a popular best practice for Angular projects. You can find a lot of tutorials online discussing the practice.
10
+
You can then use `takeUntil(this._destroyed$)` when subscribing to observables from inside your component, and the subscription will automatically
11
+
end when the component has been destroyed.
12
+
13
+
The usage of `takeUntil(this._destroyed$)` is a popular best practice for Angular projects. You can find a lot of tutorials online discussing the practice.
11
14
12
15
-[The Best Way To Unsubscribe RxJS Observables In The Angular Applications](https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0)
13
16
-[The easiest way to unsubscribe from Observables in Angular](https://medium.com/thecodecampus-knowledge/the-easiest-way-to-unsubscribe-from-observables-in-angular-5abde80a5ae3)
14
17
18
+
## Changelog
19
+
20
+
For details on recent changes, releases and Angular version support, please see the change log.
21
+
22
+
[Learn about the latest improvements](https://github.com/reactgular/destroyable/blob/develop/CHANGELOG.md).
23
+
15
24
## Installation
16
25
17
26
To get started, install the package from npm.
18
27
19
28
```bash
20
-
npm install --save @reactgular/destroyable
29
+
npm install @reactgular/destroyable
21
30
```
22
31
32
+
> To install Angular 8 or 9 versions `npm install @reactgular/[email protected]`
33
+
23
34
### Usage
24
35
25
-
Allows you to easily add `takeUntil(this.destroyed$)` to components, modules and services in an Angular application.
36
+
Allows you to easily add `takeUntil(this._destroyed$)` to components, modules and services in an Angular application.
26
37
27
38
The following example component prints ascending numbers to the console for as long as the component lives.
28
39
@@ -39,7 +50,50 @@ import {Destroyable} from '@reactgular/destroyable';
39
50
export class ExampleComponent extends Destroyable implements OnInit {
40
51
public ngOnInit(): void {
41
52
interval(1000).pipe(
42
-
takeUntil(this.destroyed$)
53
+
takeUntil(this._destroyed$)
54
+
).subscribe(value => console.log(value));
55
+
}
56
+
}
57
+
```
58
+
59
+
When implementing `OnDestroy` it's very important to call `super.ngOnDestroy()` for the base class, but it's not necessary to implement
60
+
the interface because `Destroyable` already implements it.
61
+
62
+
```
63
+
export class ExampleComponent extends Destroyable implements OnDestroy {
64
+
public constructor() {
65
+
super();
66
+
}
67
+
68
+
public ngOnDestroy() {
69
+
super.ngOnDestroy();
70
+
}
71
+
}
72
+
```
73
+
74
+
## Mixin
75
+
76
+
Destroyable supports mixins to use a different base class with your Angular components. The only limitation is that TypeScript doesn't
77
+
currently support `abstract` classes for use with mixins.
78
+
79
+
```
80
+
import {Component, OnInit} from '@angular/core';
81
+
import {interval} from 'rxjs';
82
+
import {takeUntil} from 'rxjs/operators';
83
+
import {mixinDestroyable} from '@reactgular/destroyable';
84
+
85
+
@Directive()
86
+
class BaseDirective {
87
+
}
88
+
89
+
@Component({
90
+
selector: 'example'
91
+
template: ''
92
+
})
93
+
export class ExampleComponent extends mixinDestroyable(BaseDirective) implements OnInit {
0 commit comments