RxJS-Interop

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({ selector: 'app-route-title', standalone: true, template: `
    <p>Aktuelle Route: {{ url() }}</p>
` })
export class RouteTitleComponent {
    private router = inject(Router);

    // Observable -> Signal, mit initialValue weil router.events nicht sync emittiert
    url = toSignal(
        this.router.events.pipe(
            filter((e): e is NavigationEnd => e instanceof NavigationEnd),
            map(e => e.urlAfterRedirects),
        ),
        { initialValue: '/' },
    );
}

import { BehaviorSubject } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

const counter$ = new BehaviorSubject(0);

// counter ist Signal<number> — ohne | undefined
const counter = toSignal(counter$, { requireSync: true });

console.log(counter()); // 0 (sync gelesen, kein Default nötig)

import { Component, inject, signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({ selector: 'app-search', standalone: true, template: `
    <input [value]="query()" (input)="query.set($any($event.target).value)" />
    @if (results(); as r) {
        <ul>
            @for (hit of r; track hit.id) { <li>{{ hit.title }}</li> }
        </ul>
    }
` })
export class SearchComponent {
    private http = inject(HttpClient);
    query = signal('');

    // Signal -> Observable: bei jeder Signal-Aenderung emittiert es neu
    private results$ = toObservable(this.query).pipe(
        debounceTime(250),
        distinctUntilChanged(),
        switchMap(q => q
            ? this.http.get<{ id: string; title: string }[]>(`/api/search?q=${q}`)
            : Promise.resolve([])
        ),
    );

    // Observable wieder zu Signal fuer das Template
    results = toSignal(this.results$, { initialValue: [] });
}

import { Component, inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({ selector: 'app-clock', standalone: true, template: `
    <p>Tick: {{ tick }}</p>
` })
export class ClockComponent {
    tick = 0;

    constructor() {
        // Im Konstruktor: Injection Context vorhanden, kein DestroyRef noetig
        interval(1000)
            .pipe(takeUntilDestroyed())
            .subscribe(n => this.tick = n);
    }
}

import { Component, inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent } from 'rxjs';

@Component({ selector: 'app-listener', standalone: true, template: `<p>Klicke irgendwo</p>` })
export class ListenerComponent {
    private destroyRef = inject(DestroyRef);

    startListening() {
        fromEvent(document, 'click')
            // Methode -> kein Injection Context -> destroyRef explizit
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => console.log('click'));
    }
}

import { Component, computed, inject, signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { catchError, debounceTime, distinctUntilChanged, map, of, startWith, switchMap } from 'rxjs';

interface User { id: string; name: string; email: string; }
type State =
    | { kind: 'idle' }
    | { kind: 'loading' }
    | { kind: 'ok'; users: User[] }
    | { kind: 'error'; msg: string };

@Component({ selector: 'app-user-search', standalone: true, template: `
    <input
        placeholder="Name suchen ..."
        [value]="query()"
        (input)="query.set($any($event.target).value)" />

    @switch (state().kind) {
        @case ('loading') { <p>Lade ...</p> }
        @case ('error') { <p class="error">{{ asError(state()).msg }}</p> }
        @case ('ok') {
            <ul>
                @for (u of asOk(state()).users; track u.id) {
                    <li>{{ u.name }} <small>{{ u.email }}</small></li>
                } @empty {
                    <li class="muted">Keine Treffer</li>
                }
            </ul>
        }
        @default { <p class="muted">Tippe einen Namen ein</p> }
    }
` })
export class UserSearchComponent {
    private http = inject(HttpClient);
    query = signal('');

    private state$ = toObservable(this.query).pipe(
        debounceTime(250),
        distinctUntilChanged(),
        switchMap<string, ReturnType<typeof this.search>>(q =>
            q.trim().length === 0 ? of({ kind: 'idle' } as State) : this.search(q)
        ),
    );

    state = toSignal(this.state$, { initialValue: { kind: 'idle' } as State });

    private search(q: string) {
        return this.http.get<User[]>(`/api/users?q=${encodeURIComponent(q)}`).pipe(
            map(users => ({ kind: 'ok', users } as State)),
            catchError(err => of({ kind: 'error', msg: err.message } as State)),
            startWith({ kind: 'loading' } as State),
        );
    }

    asError(s: State) { return s as Extract<State, { kind: 'error' }>; }
    asOk(s: State) { return s as Extract<State, { kind: 'ok' }>; }
}