-
-
Save mpalourdio/2c0bec03d610b24ff49db649fbb69a48 to your computer and use it in GitHub Desktop.
Angular Material Integration example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<router-outlet></router-outlet> | |
<ng-http-loader [entryComponent]="matSpinner"></ng-http-loader> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { MatSpinner } from '@angular/material'; | |
@Component({ | |
selector: 'app-root', | |
templateUrl: './app.component.html', | |
styleUrls: ['./app.component.css'] | |
}) | |
export class AppComponent { | |
public matSpinner = MatSpinner; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { BrowserModule } from '@angular/platform-browser'; | |
import { NgModule } from '@angular/core'; | |
import { FormsModule } from '@angular/forms'; | |
import { AppComponent } from './app.component'; | |
import { SecondComponent } from './second/second.component'; | |
import { FirstComponent } from './first/first.component'; | |
import { AppRoutingModule } from './app.routing.module'; | |
import { NgHttpLoaderModule } from 'ng-http-loader'; | |
import { UploadComponent } from './upload/upload.component'; | |
import { HttpService } from './http.service'; | |
import { UploadService } from './upload/upload.service'; | |
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'; | |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
import { MatProgressSpinnerModule, MatSpinner } from '@angular/material'; | |
@NgModule({ | |
declarations: [ | |
AppComponent, | |
FirstComponent, | |
SecondComponent, | |
UploadComponent, | |
], | |
imports: [ | |
BrowserModule, | |
FormsModule, | |
HttpClientModule, | |
HttpClientXsrfModule, | |
AppRoutingModule, | |
NgHttpLoaderModule.forRoot(), | |
BrowserAnimationsModule, | |
MatProgressSpinnerModule | |
], | |
providers: [ | |
HttpService, | |
UploadService, | |
], | |
bootstrap: [AppComponent] | |
}) | |
export class AppModule { | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* You can add global styles to this file, and also import other style files */ | |
@import url('../node_modules/font-awesome/css/font-awesome.min.css'); | |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
'MatSpinner' is deprecated, MatProgressSpinner should be used instead.
In Angular 13 it looks like MatProgressSpinner requires mode="indeterminate"
, otherwise it shows a progress of 0 (nothing). So i used a custom component which wraps MatProgressSpinner:
@Component({
template: '<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>'
})
export class LoadSpinnerComponent { }
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, how to pass parameters to custom (ie material) spinner component?