web-dev-qa-db-fra.com

Angular 2 Material Progress Spinner: afficher en superposition

Comment afficher Spinner Angular 2 Material Progress comme une superposition quelque peu transparente de la vue actuelle (une page ou une boîte de dialogue modale)? 

angularangular-material
5
Nicole Naumann

J'ai été inspiré par: Remplacer Angular Taille du matériau et style du conteneur md-dialog-container

Je l'ai résolu comme ça:

Créer un nouveau composant

Créer un nouveau composant ProgressSpinnerDialogComponent

Le contenu de progress-spinner-dialog.component.html:

<mat-spinner></mat-spinner>

Le contenu 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() {
  }

}

Ajouter un style

Dans styles.css, ajoutez:

.transparent .mat-dialog-container {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.0);
}

Utilisez le composant

Voici un exemple d'utilisation de spinner progress:

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();
      }
    );
  }
}

Ajoutez-le à l'app.module

 declarations: [...,ProgressSpinnerDialogComponent,...],
 entryComponents: [ProgressSpinnerDialogComponent],
14
toongeorges

Utilisez le code ci-dessous pour obtenir l'opaque 

HTML

<div style="height:800px" [class.ops]="show">
   <h2 [class.opaque]="trans">{{name}}</h2>
   <button class="btn btn-success" (click)="toggleSpinner()"> See spinner </button>
</div>
<spinner [show]="show" [size]="150"> </spinner>

COMPOSANT

import { Component, Input } from '@angular/core';

@Component({
    selector: 'spinner',
    template: `
      <div *ngIf="show">
          <span>
           <i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i>
          </span>
      </div>
    `
})
export class SpinnerComponent {
    @Input() size: number = 50;
    @Input() show: boolean;

    toggleSpinner() {
       this.show = !this.show;
       this.trans=!this.trans;
    }

}

CSS

.ops {
  opacity :0;
}

LIVE DEMO

5
Aravind

Basé sur Une approche un peu différente: Deux composants, le premier pour ouvrir le dialogue, le second est le dialogue. Dans le composant que vous voulez montrer au disque, ajoutez simplement:

<app-dialog-spinner *ngIf="progressSpinner"></app-dialog-spinner>

Et contrôlez le * ngIf dans votre logique. Ci-dessus, tout ce dont vous avez besoin pour appeler la centrifugeuse pour que le composant reste beau et propre.

Composant spinner de dialogue:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';

// Requires a transparent css (panel)id in a parent stylesheet e.g.:
// #DialogSpinnerComponent {
//   box-shadow: none !important;
//   background: transparent !important;
// }

@Component({
  selector: 'app-do-not-use',
  template: `<mat-spinner></mat-spinner>`,
  styles: []
})
export class DialogSpinnerDialogComponent { }

@Component({
  selector: 'app-dialog-spinner',
  template: ``,
  styles: []
})
export class DialogSpinnerComponent implements OnInit, OnDestroy {

  private dialog: MatDialogRef<DialogSpinnerDialogComponent>;

  constructor(
    private matDialog: MatDialog,
  ) { }

  ngOnInit() {
    setTimeout(() => {
      this.dialog = this.matDialog.open(DialogSpinnerDialogComponent, { id: 'DialogSpinnerComponent', disableClose: true });
    });
  }
  ngOnDestroy() {
    setTimeout(() => {
      this.dialog.close();
    });
  }

}

Déclarez les composants dans votre module et bien sûr enregistrez DialogSpinnerDialogComponent dans vos entryComponents. Ajoutez les propriétés css à une feuille de style parent. Cela peut probablement être amélioré mais je suis un peu pressé par le temps.

1
PVermeer