Use outputFromObservable

Author: edbzn

projects/todo-mvc/src/app/todo.component.ts

@@ -4,10 +4,10 @@ import {
   Component,
   ElementRef,
   Input,
-  Output,
   inject,
   viewChild,
 } from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
 import { rxState } from '@rx-angular/state';
 import { eventValue, rxActions } from '@rx-angular/state/actions';
@@ -53,24 +53,24 @@ const eventChecked = (e: Event): boolean => {
   `,
   template: `
     @if (isEditing) {
+    <input
+      #input
+      class="edit"
+      [value]="todo.text"
+      (blur)="actions.updateText($event)"
+      (keyup.enter)="actions.updateText($event)"
+    />
+    } @else {
+    <div class="view">
       <input
-        #input
-        class="edit"
-        [value]="todo.text"
-        (blur)="actions.updateText($event)"
-        (keyup.enter)="actions.updateText($event)"
+        class="toggle"
+        type="checkbox"
+        [checked]="todo.done"
+        (input)="actions.toggleDone($event)"
       />
-    } @else {
-      <div class="view">
-        <input
-          class="toggle"
-          type="checkbox"
-          [checked]="todo.done"
-          (input)="actions.toggleDone($event)"
-        />
-        <label (dblclick)="actions.edit()">{{ todo.text }}</label>
-        <button class="destroy" (click)="actions.remove(todo)"></button>
-      </div>
+      <label (dblclick)="actions.edit()">{{ todo.text }}</label>
+      <button class="destroy" (click)="actions.remove(todo)"></button>
+    </div>
     }
   `,
 })
@@ -85,6 +85,13 @@ export class TodoComponent {
     })
   );
 
+  readonly remove = outputFromObservable(this.actions.remove$);
+  readonly update = outputFromObservable(
+    merge(this.actions.toggleDone$, this.actions.updateText$).pipe(
+      switchMap(() => this.state.select('todo').pipe(take(1)))
+    )
+  );
+
   private readonly state = rxState<State>(({ set, connect }) => {
     set({ isEditing: false });
     connect('todo', this.actions.toggleDone$, ({ todo }, done: boolean) => ({
@@ -116,12 +123,6 @@ export class TodoComponent {
     return this.state.get('isEditing');
   }
 
-  @Output() remove = this.actions.remove$;
-  @Output() update = merge(
-    this.actions.toggleDone$,
-    this.actions.updateText$
-  ).pipe(switchMap(() => this.state.select('todo').pipe(take(1))));
-
   constructor() {
     rxEffects(({ register }) => {
       const focusInputWhenEditing$ = this.state.$.pipe(