Observable models

src/app/components/artists/artists.component.html

@@ -1,7 +1,6 @@
 <h1>Artists</h1>
 
 <ul>
-	<li *ngFor="let artist of artists$ | async">
-		{{ artist.name }}
-	</li>
+	<li *ngFor="let artist of artists$ | async">{{ artist.$.name | async }} ID: {{ artist.$.id | async }}</li>
 </ul>
+<button (click)="updateNames()">updateNames</button>

src/app/components/artists/artists.component.ts

@@ -11,4 +11,10 @@ export class ArtistsComponent {
 	public artists$ = this.artistsService.getAllModels();
 
 	constructor(private readonly artistsService: ArtistsService) {}
+
+	public updateNames() {
+		this.artistsService.findAll().forEach((artist, index) => {
+			artist.name += index;
+		});
+	}
 }

src/app/models/artist.ts

@@ -3,7 +3,7 @@ import { BaseModel } from './base-model';
 
 export class Artist extends BaseModel {
 	public static endpoint = 'artists';
-	public static type = 'project';
+	public static type = 'artist';
 
 	@Attribute()
 	public name!: string;

src/app/models/base-model.ts

@@ -1,7 +1,37 @@
-import { IType, Model } from '@datx/core';
 import { jsonapiAngular } from '@datx/jsonapi-angular';
+import { IRawModel, PatchType, PureCollection, IType, Model } from '@datx/core';
+import { getMeta } from '@datx/utils';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export class BaseModel extends jsonapiAngular(Model) {
+	private _observables: Record<string, BehaviorSubject<any>> = {};
+
+	public $: { [key in 'id' | keyof Omit<this, keyof BaseModel | '$'>]: Observable<this[key]> } = {} as any;
+
+	constructor(rawData?: IRawModel, collection?: PureCollection) {
+		super(rawData, collection);
+
+		const fields = [...Object.keys(getMeta(this, 'fields', {})), 'id'];
+		fields.forEach((key) => {
+			this._observables[key] = new BehaviorSubject((this as any)[key]);
+			(this.$ as any)[key] = this._observables[key].asObservable();
+		});
+
+		this.onPatch((patch) => {
+			if (patch.patchType === PatchType.UPDATE) {
+				const newValue = patch.newValue!;
+				Object.keys(newValue).forEach((key) => {
+					if (key in this._observables) {
+						this._observables[key].next((newValue as any)[key]);
+					} else {
+						this._observables[key] = new BehaviorSubject((newValue as any)[key]);
+						(this.$ as any)[key] = this._observables[key].asObservable();
+					}
+				});
+			}
+		});
+	}
+
 	public get id(): IType {
 		return this.meta.id;
 	}