src/module/components/dialogs/mat-loading-dialog/mat-loading-dialog.component.ts
| selector | mat-loading-dialog |
| styleUrls | ./mat-loading-dialog.component.scss |
| templateUrl | ./mat-loading-dialog.component.html |
Properties |
Methods |
constructor(dialogRef: MatDialogRef
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| color |
Type : ThemePalette
|
| Public data |
Type : MatLoadingDialogData
|
Decorators :
@Optional()
|
| Public dialogRef |
Type : MatDialogRef<MatLoadingDialog>
|
| icon |
Type : string
|
| title |
Type : string
|
import {Component, Inject, OnInit, Optional} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, ThemePalette} from '@angular/material';
export interface MatLoadingDialogData {
title?: string;
icon?: string;
color?: ThemePalette;
}
@Component({
selector: 'mat-loading-dialog',
templateUrl: './mat-loading-dialog.component.html',
styleUrls: ['./mat-loading-dialog.component.scss']
})
export class MatLoadingDialog implements OnInit {
title: string;
icon: string;
color: ThemePalette;
constructor(public dialogRef: MatDialogRef<MatLoadingDialog>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: MatLoadingDialogData) {
}
ngOnInit() {
if (this.data) {
this.title = this.data.title ? this.data.title : 'Loading...';
this.icon = this.data.icon ? this.data.icon : '';
this.color = this.data.color ? this.data.color : 'primary';
}
}
}
<mat-dialog-content fxLayout="column">
<div class="title">
{{title}}
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
<mat-spinner [color]="color"></mat-spinner>
</div>
</mat-dialog-content>
./mat-loading-dialog.component.scss
.title {
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}