Angular8 MatDialog

[dedlfix]

Tach!

wo wir gerade beim thema sind. wenn ich im dialog auf einen button drücke, wird eine POST REQUEST abgeschickt. solange der POST auf pending steht hätte ich gerne einen ladestreifen oder ähnliches und nach dem pending einen kurzen dialog wo ich dem nutzer sage ob das geklappt hat. bietet mir angular sowas, falls ja wie heißt das modul?

Angular bietet da nichts direkt an. Auch Angular Material nicht. Aber du kannst vor dem Absenden einen Dialog einblenden mit Progress Spinner oder ähnlichem drin. Wenn der Request fertig ist (auch den Fehlerfall beachten) kannst du den Dialog entfernen.

Wenn die Sache automatisiert stattfinden soll, dann kannst du einen HttpInterceptor erstellen. Zum Beispiel so:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        setTimeout(() => this.showSpinner());

        return next.handle(req).pipe(
            finalize(() => {
                setTimeout(() => this.hideSpinner());
            })
        );
    }

    private showSpinner() { ... }
    private hideSpinner() { ... }
}

Die setTimeout() ohne Zeit dienen dazu, das Anzeigen und Verstecken an die Javascript-Event-Loop anzuhängen, weil der Browser sonst mitunter zu busy ist, sich mit dem Dialog zu beschäftigen.

Der Interceptor muss noch ins System eingebunden werden, aber da sagt dir das Angular-Handbuch, wie das geht.

dedlfix.