Subjectize

TypeScript decorators for binding RxJS Subject with class properties

Install

npm i -S subjectize

or

yarn add subjectize

Quick start

import { Subjectize, SubjectizeProps } from 'subjectize';
import { ReplaySubject } from 'rxjs';

class SomeClass {
  propA: any;
  propB: any;

  @Subjectize('propA')
  propA$ = new ReplaySubject(1);

  @SubjectizeProps(['propA', 'propB'])
  propAB$ = new ReplaySubject(1);
}

const instance = new SomeClass();
instance.propA = 'A';
instance.propB = 'B';

// would print 'A'
instance.propA$.subscribe(console.log);

// would print ['propA', 'A'], then ['propB', 'B']
instance.propAB$.subscribe(console.log);

Use with Angular @Input

import { Component, Input } from "@angular/core";
import { ReplaySubject } from "rxjs";
import { Subjectize } from "subjectize";

@Component({
  selector: "app-counter",
  templateUrl: "./counter.component.html",
  styleUrls: []
})
export class CounterComponent {
  @Input()
  count: number;

  @Subjectize("count")
  count$ = new ReplaySubject(1);
}

See full example here.

How it works

• Intercept input property changes with a setter

Author

👤 hankchiutw

• Website: https://hankchiu.tw/
• Twitter: @hankchiu_tw
• Github: @hankchiutw
• LinkedIn: @hankchiutw

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 hankchiutw. This project is MIT licensed.