Answer:49

apps/rxjs/49-hold-to-save-button/src/app/app.component.ts

@@ -1,25 +1,51 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { HoldableDirective } from './holdable';
 
 @Component({
-  imports: [],
+  imports: [HoldableDirective],
   selector: 'app-root',
   template: `
     <main class="flex h-screen items-center justify-center">
       <div
         class="flex w-full max-w-screen-sm flex-col items-center gap-y-8 p-4">
         <button
+          appHoldable
+          [startValue]="currentValue()"
+          [endValue]="maxValue"
+          (hold)="onHold($event)"
+          (cancelled)="onHoldCancelled()"
+          (finished)="onHoldFinished()"
           class="rounded bg-indigo-600 px-4 py-2 font-bold text-white transition-colors ease-in-out hover:bg-indigo-700">
           Hold me
         </button>
 
-        <progress [value]="20" [max]="100"></progress>
+        <progress [value]="currentValue()" [max]="maxValue"></progress>
+
+        @if (finished()) {
+          <p>Finished!</p>
+        }
       </div>
     </main>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  onSend() {
-    console.log('Save it!');
+  protected readonly currentValue = signal(0);
+  protected readonly finished = signal(false);
+
+  protected readonly maxValue = 10;
+
+  onHold(val: number): void {
+    this.currentValue.set(val);
+  }
+
+  onHoldFinished(): void {
+    this.finished.set(true);
+    this.currentValue.set(this.maxValue);
+  }
+
+  onHoldCancelled() {
+    this.currentValue.set(0);
+    this.finished.set(false);
   }
 }

apps/rxjs/49-hold-to-save-button/src/app/holdable.ts

@@ -0,0 +1,67 @@
+import {
+  DestroyRef,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, interval, merge, takeUntil } from 'rxjs';
+
+@Directive({
+  selector: '[appHoldable]',
+  standalone: true,
+})
+export class HoldableDirective {
+  holdInterval = input<number>(500);
+  startValue = input<number>(0);
+  endValue = input<number>(100);
+
+  readonly hold = output<number>();
+  readonly finished = output<void>();
+  readonly cancelled = output<void>();
+
+  private readonly elRef = inject(ElementRef<HTMLElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    const el = this.elRef.nativeElement;
+
+    const mousedown$ = fromEvent(el, 'mousedown', { passive: true });
+    const touchstart$ = fromEvent(el, 'touchstart', { passive: true });
+    const start$ = merge(mousedown$, touchstart$);
+
+    const mouseup$ = fromEvent(el, 'mouseup', { passive: true });
+    const mouseleave$ = fromEvent(el, 'mouseleave', { passive: true });
+    const touchend$ = fromEvent(el, 'touchend', { passive: true });
+    const stop$ = merge(mouseup$, mouseleave$, touchend$);
+
+    start$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      if (this.startValue() >= this.endValue()) return;
+
+      let value = this.startValue();
+      let completed = false;
+
+      const sub = interval(this.holdInterval())
+        .pipe(takeUntil(stop$), takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: () => {
+            if (value >= this.endValue()) {
+              completed = true;
+              this.finished.emit();
+              sub.unsubscribe();
+            } else {
+              value++;
+              this.hold.emit(value);
+            }
+          },
+          complete: () => {
+            if (!completed) {
+              this.cancelled.emit();
+            }
+          },
+        });
+    });
+  }
+}