title: Angular 6 'mat-button-toggle' is not a known element
body: <p>I've checked those questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/50149672/mat-toolbar-is-not-a-known-element-angular-5">&#39;mat-toolbar&#39; is not a known element - Angular 5</a></li>
  <li><a href="https://stackoverflow.com/questions/42157853/jhipster-md-button-is-not-a-known-element">Jhipster / md-button is not a known element</a></li>
  <li><a href="https://stackoverflow.com/questions/50190337/template-parse-errors-mat-icon-is-not-a-known-element">Template parse errors: &#39;mat-icon&#39; is not a known element</a></li>
  <li><a href="https://stackoverflow.com/questions/46050733/meterial-2-md-datepicker-toggle-is-not-a-known-element">Meterial 2 md-datepicker-toggle is not a known element</a></li>
  <li><a href="https://stackoverflow.com/questions/47083164/how-to-bind-to-model-with-angular-material-mat-button-toggle">How to bind to model with Angular Material &lt;mat-button-toggle&gt;?</a></li>
  </ul>
  
  <p>and I've followed this tutorial: </p>
  
  <ul>
  <li><a href="https://material.angular.io/components/button-toggle/overview" rel="noreferrer">https://material.angular.io/components/button-toggle/overview</a></li>
  </ul>
  
  <p>and previously I've used Angular Material, but for this it just won't work:</p>
  
  <blockquote>
    <p>compiler.js:1016 Uncaught Error: Template parse errors:
    'mat-button-toggle' is not a known element:
    1. If 'mat-button-toggle' is an Angular component, then verify that it is part of this module.</p>
  </blockquote>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { TRANSLATION_PROVIDERS } from './translations';
  import { TranslateService } from './services/translator.service';
  import { AppComponent } from './app.component';
  import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FormsModule } from '@angular/forms';
  
  import { ReactiveFormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      MatButtonModule,
      MatCheckboxModule,
      MatFormFieldModule,
      MatInputModule,
      MatRippleModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
    ],
    exports: [
      BrowserModule,
      FormsModule,
      MatButtonModule,
      MatCheckboxModule,
      MatFormFieldModule,
      MatInputModule,
      MatRippleModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
    ],
    declarations: [AppComponent],
    providers: [TRANSLATION_PROVIDERS, TranslateService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>(here I am just trying to add those buttons even without real functionality)</p>
  
  <p>....</p>
  
  <pre><code>  &lt;div&gt;
        &lt;mat-button-toggle-group name="fontStyle" aria-label="Font Style"&gt;
            &lt;mat-button-toggle value="bold"&gt;Bold&lt;/mat-button-toggle&gt;
            &lt;mat-button-toggle value="italic"&gt;Italic&lt;/mat-button-toggle&gt;
            &lt;mat-button-toggle value="underline"&gt;Underline&lt;/mat-button-toggle&gt;
          &lt;/mat-button-toggle-group&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>...</p>
  
  <p>styles.css</p>
  
  <pre><code>@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  
  body { 
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
  }
  
  .basic-container {
    padding: 30px;
  }
  
  .version-info {
    font-size: 8pt;
    float: right;
  }
  
  html, body { height: 100%; }
  body { margin: 0; font-family: 'Roboto', sans-serif; }
  </code></pre>