@ngze/rehooktive
v1.0.0
Published
Reactivating Angular lifecycle hooks! 🚀
Downloads
2
Maintainers
Readme
Reactivating Angular lifecycle hooks! 🚀
Rehooktive is a lightweight library that lets you have the power of reactive programming over Angular lifecycle hooks. Use it to take advantage of RxJS and have a full reactive support in your directives/components code.
Features
✅ Support all lifecycle hooks ✅ Fully decorative solution ✅ Ivy support
Installation
# Using ng
ng add @ngze/rehooktive
# Using yarn
yarn add @ngze/rehooktive
# Using npm
npm i @ngze/rehooktive
Usage
Here is a usage example for reactive OnChanges
:
@Component({...})
export class SimpleComponent {
@Rehooktive(Hook.OnChanges) // <-- Or any other hook exposed via 'Hook' enum.
readonly onChanges$: Observable<SimpleChanges>;
@Input()
readonly value: number;
readonly value$ = this.onChanges$
.pipe(
map(() => this.value),
distinctUntilChanged()
);
}
Without Ivy
In case that you're not using Ivy, all you need to carry out is implementing OnChanges
(or any other hook you are using):
@Component({...})
export class SimpleComponent implements OnChanges {
@Rehooktive(Hook.OnChanges)
readonly onChanges$: Observable<SimpleChanges>;
@Input()
readonly value: number;
readonly value$ = this.onChanges$
.pipe(
map(() => this.value),
distinctUntilChanged()
);
ngOnChanges() {} // <-- Add empty method for 'OnChanges' hook.
}
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!