How to display the Angular 2 Material Progress Spinner as a somewhat transparent overlay of the current view (a page or a modal dialog)?
相关问题
- Angular RxJS mergeMap types
- npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fs
- How to update placeholder text in ng2-smart-table?
- How to instantiate Http service in main.ts manuall
- Angular: ngc or tsc?
相关文章
- angular脚手架在ie9+下兼容问题
- angular 前端项目 build 报错 "Cannot find module 'le
- Angular Material Stepper causes mat-formfield to v
- After upgrade to Angular 9 cannot find variable in
- is there any difference between import { Observabl
- Suppress “Circular dependency detected” suppress w
- How can you get current positional information abo
- Angular material table not showing data
Use the below code to achieve the opaque
HTML
COMPONENT
CSS
LIVE DEMO
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:
The content of progress-spinner-dialog.component.ts:
Add a Style
In styles.css add:
Use the Component
Here an example usage of the progress spinner:
Based on A bit different approach: Two components, first to open the dialog, second is the dialog. In the component you want to show the spinner just add:
<app-dialog-spinner *ngIf="progressSpinner"></app-dialog-spinner>
And control the *ngIf in your logic. Above is all you need to call the spinner so the component stays nice and clean.
Dialog spinner component:
Declare the components in your module and of course register
DialogSpinnerDialogComponent
in your entryComponents. Add the css properties to a parent stylesheet. This can probably be improved but I'm a bit pressed for time.