RxJS und Angular Material: Eine perfekte Kombination

Angular Material bietet eine umfangreiche Sammlung von UI-Komponenten, die auf Material Design basieren. Durch die Kombination von RxJS und Angular Material können wir dynamische und reaktive Benutzeroberflächen erstellen.

Beispiel: Autocomplete mit RxJS und Angular Material

TypeScript

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from    'rxjs/operators';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent    {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  constructor() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value    => this._filter(value))
      );
  }

  private _filter(value: string):    string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));   
  }
}

Wie funktioniert es:

1. Wir erstellen eine FormControl für das Eingabefeld.

2. Die valueChanges des Eingabefelds werden in ein Observable umgewandelt.

3. Mit startWith('') stellen wir sicher, dass auch bei einem leeren Eingabefeld Optionen angezeigt werden.

4. Der map-Operator filtert die Optionen basierend auf dem eingegebenen Wert.

RxJS und WebSockets: Echtzeit in Ihren Anwendungen

RxJS ist ideal für den Umgang mit WebSockets, da es uns ermöglicht, eingehende Nachrichten als Observable zu behandeln.

TypeScript

import { webSocket } from 'rxjs/webSocket';

const socket = webSocket('ws://localhost:8080');

socket.subscribe(
  message => console.log('Nachricht empfangen:', message),
  error => console.error('WebSocket-Fehler:', error),
  () => console.log('WebSocket geschlossen')
);

Anwendungsfälle:

• Chat-Anwendungen

• Live-Updates von Daten

• Spielentwicklung

RxJS und Server-Sent Events (SSE)

SSE sind eine weitere Möglichkeit, um Server-seitig Ereignisse an den Client zu senden. RxJS bietet auch hier eine einfache Möglichkeit, mit SSE umzugehen.

TypeScript

import { Observable } from 'rxjs';
import { webSocket } from 'rxjs/webSocket';

const sse = new EventSource('http://example.com/sse');
const observable = new Observable(observer => {
  sse.onmessage = (event) => observer.next(event.data);
  sse.onerror = (error) => observer.error(error);
  return () => {
    sse.close();
  };
});

RxJS und Testing

Das Testen von RxJS-Code ist von entscheidender Bedeutung, um die Qualität Ihrer Anwendung zu gewährleisten.

• Marble Diagrams: Visuelle Darstellung von Observables und deren Verhalten.

• TestScheduler: Simulieren von Zeit und asynchronem Verhalten für detaillierte Tests.

• Jasmine-Marbles: Eine Bibliothek, die die Erstellung von Marble Diagrams erleichtert.

TypeScript

import { marbles } from 'rxjs-marbles/testing';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

it('should map values', () => {
  const values = { a: 1, b: 2, c: 3 };
  const source = of(values.a, values.b, values.c);
  const expected = of(values.a * 2, values.b * 2, values.c * 2);

  testScheduler.run(({ cold, expectObservable }) => {
    const result = cold('abc', values).pipe(map(x => x * 2));
    expectObservable(result).toBe('abc', { a: values.a * 2, b: values.b * 2, c: values.c * 2 });
  });
});

Fazit

RxJS ist ein äußerst mächtiges Werkzeug, das Ihnen hilft, komplexe Angular-Anwendungen zu erstellen. Durch die Kombination von RxJS mit Angular Material, WebSockets und Server-Sent Events können Sie dynamische, reaktive und performante Benutzeroberflächen entwickeln.