rehooktive

rehooktive copied to clipboard

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):

Zeev Katz 💻 📖 🤔 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!