Issue
How to display the Angular 2 Material Progress Spinner as a somewhat transparent overlay of the current view (a page or a modal dialog)?
Solution
I was inspired by: Overriding Angular Material Size and Styling of md-dialog-container
I solved it like this:
Create a New Component
Create a new component ProgressSpinnerDialogComponent
The content of progress-spinner-dialog.component.html:
<mat-spinner></mat-spinner>
The content of progress-spinner-dialog.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-progress-spinner-dialog',
templateUrl: './progress-spinner-dialog.component.html',
styleUrls: ['./progress-spinner-dialog.component.css']
})
export class ProgressSpinnerDialogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Add a Style
In styles.css add:
.transparent .mat-dialog-container {
box-shadow: none;
background: rgba(0, 0, 0, 0.0);
}
Use the Component
Here an example usage of the progress spinner:
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
import { Observable } from "rxjs";
import { ProgressSpinnerDialogComponent } from "/path/to/progress-spinner-dialog.component";
@Component({
selector: 'app-use-progress-spinner-component',
templateUrl: './use-progress-spinner-component.html',
styleUrls: ['./use-progress-spinner-component.css']
})
export class UseProgressSpinnerComponent implements OnInit {
constructor(
private dialog: MatDialog
) {
let observable = new Observable(this.myObservable);
this.showProgressSpinnerUntilExecuted(observable);
}
ngOnInit() {
}
myObservable(observer) {
setTimeout(() => {
observer.next("done waiting for 5 sec");
observer.complete();
}, 5000);
}
showProgressSpinnerUntilExecuted(observable: Observable<Object>) {
let dialogRef: MatDialogRef<ProgressSpinnerDialogComponent> = this.dialog.open(ProgressSpinnerDialogComponent, {
panelClass: 'transparent',
disableClose: true
});
let subscription = observable.subscribe(
(response: any) => {
subscription.unsubscribe();
//handle response
console.log(response);
dialogRef.close();
},
(error) => {
subscription.unsubscribe();
//handle error
dialogRef.close();
}
);
}
}
Add it to the app.module
declarations: [...,ProgressSpinnerDialogComponent,...],
entryComponents: [ProgressSpinnerDialogComponent],
Answered By - toongeorges
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.