title: Angular 5 - Angular Material does not work in component
body: <p>I am implementing angular material in my angular 5 application.
  When I import in my app.module.ts - I do not have a problem, but when I used in my page page.component.html does not work showing the follow error: </p>
  
  <pre><code>'Uncaught Error: Template parse errors:
  'mat-toolbar-row' is not a known element:
  '1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module.
  '2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("r="let paragraph of paragraphs"&gt;{{paragraph}}&lt;/p&gt;
      &lt;mat-toolbar color="primary"&gt;
          [ERROR -&gt;]&lt;mat-toolbar-row&gt;
            &lt;span&gt;MyMaterial&lt;/span&gt;
        "): ng:///SharedComponentsModule/FollowUpComponent.html@35:12
  'mat-toolbar' is not a known element:
  1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
  2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      &lt;h6&gt;Answer:&lt;/h6&gt;
      &lt;p *ngFor="let paragraph of paragraphs"&gt;{{paragraph}}&lt;/p&gt;
      [ERROR -&gt;]&lt;mat-toolbar color="primary"&gt;
          &lt;mat-toolbar-row&gt;
            &lt;span&gt;MyMaterial&lt;/span&gt;
  "): ng:///SharedComponentsModule/FollowUpComponent.html@34:8
  at syntaxError (compiler.js:485)
  at TemplateParser.parse (compiler.js:24668)
  at JitCompiler._parseTemplate (compiler.js:34621)
  at JitCompiler._compileTemplate (compiler.js:34596)
  at eval (compiler.js:34497)
  at Set.forEach (&lt;anonymous&gt;)
  at JitCompiler._compileComponents (compiler.js:34497)
  at eval (compiler.js:34367)
  at Object.then (compiler.js:474)
  at JitCompiler._compileModuleAndComponents (compiler.js:34366)
  </code></pre>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common'; 
  import { MatButtonModule, MatToolbarModule } from '@angular/material';
  
  @NgModule({
     imports: [MatButtonModule, MatToolbarModule],
     exports: [MatButtonModule, MatToolbarModule]
  })
  export class MaterialModule { }
  </code></pre>
  
  <p>I have imported <code>MaterialModule</code> and included in <code>imports</code> in <code>app.module.ts</code>.</p>
  
  <p>Here's my component's HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar color="primary"&gt;
    &lt;mat-toolbar-row&gt;
      &lt;span&gt;MyMaterial&lt;/span&gt;
      &lt;span class="example-spacer"&gt;&lt;/span&gt;
      &lt;button mat-button&gt;About&lt;/button&gt;
      &lt;button mat-button&gt;Services&lt;/button&gt;
      &lt;button mat-button&gt;Contact&lt;/button&gt;
    &lt;/mat-toolbar-row&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>