NgRx Component Store Stateful Directive with Output

Using NgRx Component Store to add state to a Directive which then outputs that state to the parent.

import { Directive, Output } from "@angular/core";
import { ComponentStore } from "@ngrx/component-store";
import { interval, Observable, tap } from "rxjs";

interface MyState {
  counter: number;
}

@Directive({
  selector: "[myStatefulDirective]",
  standalone: true,
})
export class StatefulDirectiveWithOutputsDirective extends ComponentStore<MyState> {
  @Output() counterChange = this.select((state) => state.counter);

  private readonly incrementCounter = this.updater((state) => ({
    ...state,
    counter: state.counter + 1,
  }));

  private readonly incrementByInterval = this.effect(
    (origin$: Observable<number>) =>
      origin$.pipe(tap(() => this.incrementCounter()))
  );

  constructor() {
    super({
      counter: 0,
    });

    this.incrementByInterval(interval(1000));
  }
}

And then in your parent component you can use it like this:

import { Component } from "@angular/core";
import { StatefulDirectiveWithOutputsDirective } from "./stateful-directive-with-outputs.directive";

@Component({
  standalone: true,
  selector: "angular-snippet-examples-root",
  template: `
    <div myStatefulDirective (counterChange)="counter = $event">
      {{ counter }}
    </div>
  `,
  imports: [StatefulDirectiveWithOutputsDirective],
})
export class AppComponent {
  counter: number | null = null;
}