I'm working on Angular 4. And I made a new project with :
ng new test-app
Then I ran :
npm install --save @angular/material @angular/cdk
ng g c first
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
FirstComponent
],
imports: [
BrowserModule,
MatProgressBarModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
first.component.html
<p>
first works!
</p>
<mat-spinner></mat-spinner>
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
In the inspector the spinner looks like to be working. (same things for the progress bar) But without the inspector I can not see anything.
I tried to change color in css, the background seems to works but the color doesn't change anything.
How can I see my spinner or my progress-bar?
You have to import a theme in your styles.css
, e.g. add this line to the top of the file:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Since some components depend on the BrowserAnimationsModule
, you should always import it for animations to work.
For more detailed information about the required setup, checkout the setup guide.