Uncaught Error: Template parse errors

Question

Please I'm very new to angular. I was following a tutorial and i got this error. I've checked other peoples errors and solution. None saved me.

    compiler.js:215 Uncaught Error: Template parse errors:
   'mat-spinner' is not a known element:
1. If 'mat-spinner' is an Angular component, then verify that it is part of 
this module.
2. If 'mat-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("

<button mat-raised-button (click)="showAnswer()">Answer Me</button>
[ERROR ->]<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"> 
</mat-spinner>
</mat-card>

"): ng:///AppModule/AppComponent.html@21:2
'hi' is not a known element:
1. If 'hi' is an Angular component, then verify that it is part of this 
module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of 
this component. ("

<mat-card *ngIf="answerDisplay">
[ERROR ->]<hi>{{answerDisplay}}</hi>
</mat-card>

"): ng:///AppModule/AppComponent.html@25:2
at syntaxError (compiler.js:215)
at TemplateParser.push../
node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
(compiler.js:14702)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

That's the error. This is my app.component.html

    <!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
<mat-toolbar-row>
 <span>MyMaterial</span>

<span class="example-spacer"></span>

<button mat-button>About</button>
<button mat-button>Services</button>
<button mat-button>Contact</button>
</mat-toolbar-row>
</mat-toolbar>

<mat-card>
<mat-form-field>
<input matInput[(ngModel)]="answer" placeholder="Enter something..">
</mat-form-field>

<br>

<button mat-raised-button (click)="showAnswer()">Answer Me</button>
<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
</mat-card>

<mat-card *ngIf="answerDisplay">
<hi>{{answerDisplay}}</hi>
</mat-card>

material.module.ts

    /**
     * Created by regina on 05/15/2018.
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, 
MatProgressBarModule,MatToolbarModule } from '@angular/material';

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule]

  })

   export class MaterialModule { }

As i said earlier, I've checked questions like my own on here...none could solve my problem. Most solutions given has already being in my code. I needed to learn about angular material. Please any help will much appreciated. I'm so stuck! Thank you very much in advance!

Answer 1

Add MatProgressSpinnerModule under AppModule.ts

 import {
  MatFormFieldModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
} from '@angular/material';

Answer 2

import MatProgressSpinnerModule t use mat-spinner .

see docs https://material.angular.io/components/progress-spinner/api

    /**
     * Created by regina on 05/15/2018.
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, 
MatProgressBarModule,MatToolbarModule ,
MatProgressSpinnerModule} from '@angular/material';

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule]

  })

   export class MaterialModule { }