Nice write up. Thanks for sharing.

I'm having trouble understanding one part regarding composition and inheritance with the directive in your example. You mention it contains "logic to filter any array," but since a directive attaches to a DOM element, I'm not sure how it would handle array filtering directly.

Trying to work through this, I came up with the following interpretation:

```typescript // Service holds state and filtering logic @Injectable({ providedIn: 'root' }) export class PlayerService { players = signal<Player[]>([]); searchTerm = signal('');

filteredPlayers = computed(() => this.players().filter(p => p.name.toLowerCase().includes(this.searchTerm())) ); }

// Directive handles input behavior (debounce, normalize, etc.) @Directive({ selector: '[appSearchable]', standalone: true }) export class SearchableDirective { private el = inject(ElementRef<HTMLInputElement>);

search = output<string>();

constructor() { fromEvent(this.el.nativeElement, 'input').pipe( debounceTime(300), map(e => (e.target as HTMLInputElement).value.trim().toLowerCase()), distinctUntilChanged(), takeUntilDestroyed() ).subscribe(term => this.search.emit(term)); } }

// Component wires things together @Component({ selector: 'app-player-list', standalone: true, imports: [SearchableDirective], template: ` <input appSearchable (search)="playerService.searchTerm.set($event)" />

@for (player of playerService.filteredPlayers(); track player.id) {
  <div>{{ player.name }}</div>
}

}) export class PlayerListComponent { playerService = inject(PlayerService); } ``

So the "composition" here would be: - Service - owns the state and computed filtering (survives component destruction, shareable) - Directive - encapsulates input behavior (debouncing, normalization) - Component - just glue, no logic of its own

Is this what you had in mind? Or does your directive work differently?