How to use observable state for ui components

import{InputState}from'./input-state-decorator';import{ObservableState}from'./observable-state';typeMyUiComponentInputState={firstName:string;lastNam:string;age:number;}typeMyUiComponentState=MyUiComponentInputState&{showAge:number;}@Component({template:`    <ng-container *ngIf="vm$|async as vm">        <p>First Name: {{vm.firstName}}</p>        <p>Last Name: {{vm.lastName}}</p>        <p *ngIf="vm.showAge">Age: {{vm.age}}</p>        <button (click)="toggle()">Toggle Age</button>    </ng-container>  `})exportclassMyUiComponentextendsObservableState<MyUiComponentState>{  @InputState()publicreadonlyinputState$!:Observable<MyUiComponentInputState>  @Input()publicfirstName='';  @Input()publiclastName='';  @Input()publicage=0;constructor(){super();this.initialize({firstName:'Brecht',lastName:'Billiet',age:35,showAge:false,},this.inputState$)}publicreadonlyvm$=this.state$.pipe(map(state)=>{...});publictoggle():void{this.patch({showAge:!this.snapshot.showAge})}}

Adding more reactive stuff

import{InputState}from'./input-state-decorator';import{ObservableState}from'./observable-state';typeMyUiComponentInputState={firstName:string;lastNam:string;age:number;}typeMyUiComponentState=MyUiComponentInputState&{showAge:number;time:number;}@Component({template:`    <ng-container *ngIf="vm$|async as vm">        <p>First Name: {{vm.firstName}}</p>        <p>Last Name: {{vm.lastName}}</p>        <p *ngIf="vm.showAge">Age: {{vm.age}}</p>        The time is {{vm.time|date:'hh:mm:ss'}}        <button (click)="toggle()">Toggle Age</button>    </ng-container>  `})exportclassMyUiComponentextendsObservableState<MyUiComponentState>{  @InputState()publicreadonlyinputState$!:Observable<MyUiComponentInputState>  @Input()publicfirstName='';  @Input()publiclastName='';  @Input()publicage=0;constructor(){super();this.initialize({firstName:'Brecht',lastName:'Billiet',age:35,showAge:false,time:newDate().getTime()},this.inputState$);this.connect({time:interval(1000).pipe(map(()=>newDate().getTime()))})}publicreadonlyvm$=this.state$;publictoggle():void{this.patch({showAge:!this.snapshot.showAge})}}

Run demo

json-server backend/db.json

npm start