Menu
Requirement:
I want to show a <mat-spinner> while loading the <app-root> in Angular
Code tried:
index.html:
<body>
<app-root>Loading ...
<mat-spinner></mat-spinner>
</app-root>
</body>
app.module.ts:
import {
...,
MatProgressSpinnerModule,
... }from '@angular/material';
@NgModule({
declarations: [
...
],
imports: [
...,
MatProgressSpinnerModule,
...
],
...
})
Version info:
Angular CLI: 6.2.2
Node: 10.5.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Result:
Its showing Loading ... but not showing <mat-spinner> , tried spinner alone as well as with "Loading ..." text as given above, but the result is same - <mat-spinner> doesn't show.
Am I missing anything here ?
523
While application initially loads angular hasn't loaded the App module yet so it doesn't know what mat-spinner is at that point.
You would need to use something that's is not angular if you want to show any thing before the modules are loaded. Your best shot would be a gif-spinner
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
