angular-hooks.ts

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <p>You clicked {{count.value}} times</p>
    <button (click)="setCount(count.value + 1)">Click Me</button>
  `,
})
export class AppComponent {
  @UseState(0) count; setCount;

  @UseEffect()
  onEffect() {
    document.title = `You clicked ${this.count.value} times`;
  }
}


/// Implementation Details:

function UseEffect() {
  return function (target, key, descriptor) {
    target.ngOnInit = descriptor.value;
    target.ngOnChanges = descriptor.value;
  };
}


function UseState(seed: any) {
  return function (target, key) {
    target[key] = new BehaviorSubject(seed);
    target[`set${key.replace(/^\w/, c => c.toUpperCase())}`] = (val) => target.count.next(val);
  };
}