Solución:
Me inspiré en: Anular el tamaño y el estilo del material angular de md-dialog-container
Lo resolví así:
Crear un nuevo componente
Cree un nuevo componente ProgressSpinnerDialogComponent
El contenido de progress-spinner-dialog.component.html:
<mat-spinner></mat-spinner>
El contenido de 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() {
}
}
Agregar un estilo
En styles.css agregue:
.transparent .mat-dialog-container {
box-shadow: none;
background: rgba(0, 0, 0, 0.0);
}
Utilice el componente
Aquí un ejemplo de uso de la ruleta de progreso:
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from "@angular/material";
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();
}
);
}
}
Agréguelo a la aplicación.module
declarations: [...,ProgressSpinnerDialogComponent,...],
entryComponents: [ProgressSpinnerDialogComponent],
Utilice el siguiente código para lograr el opaco:
HTML
<div style="height: 800px" [class.hide]="show">
<button class="btn btn-success" (click)="showSpinner()">Show spinner</button>
</div>
<app-spinner [show]="show" [size]="150"></app-spinner>
COMPONENTE
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-spinner',
template: `
<i aria-hidden="true" class="fa fa-spinner fa-spin" [style.font-size.px]="size" *ngIf="show"></i>
`
})
export class SpinnerComponent {
@Input() size = 50;
@Input() show = false;
showSpinner() {
this.show = true;
}
}
CSS
.hide {
opacity: 0;
}
DEMO EN VIVO
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)