title: How to use angular/material version 7.0.1 component in my project?
body: <p>I start, learning the Angular with Google Material Design, so far so good, I create my front-end app with the official documentation from  <a href="https://angular.io/tutorial" rel="nofollow noreferrer">https://angular.io/tutorial</a> and <a href="https://material.angular.io/guides" rel="nofollow noreferrer">https://material.angular.io/guides</a> websites.</p>
  
  <p><strong>I read a <a href="https://stackoverflow.com/questions/45166844/how-to-import-angular-material-in-project">similar question</a> but that won't work for me, my app uses the Angular 7.0.0 with Angular Material 7.0.0.</strong> </p>
  
  <p>So, I want to use most of the <a href="https://material.angular.io/components/categories" rel="nofollow noreferrer">Angular Material Components</a> in my demo app, what is the best way to have, all of them.</p>
  
  <p>I read many articles and tutorials like <a href="https://alligator.io/angular/angular-material-2/" rel="nofollow noreferrer">Getting Started With Angular Material 2</a> or <a href="https://www.sitepoint.com/angular-material-design-components/" rel="nofollow noreferrer">this one</a>, but in all of them, they just using the basic components or the tutorial is about old version of Angular Material and the current official documentation doesn't provide the list of available component to Import for current version and how to use those components by the way?</p>
  
  <p>My app.module.ts with basic component:<strong>(Updated code)</strong></p>
  
  <pre><code>// angular component and 
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from "@angular/forms";
  
  // my components
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { FooterComponent } from './footer/footer.component';
  import { NavigationComponent } from "./header/navigation/navigation.component";
  import { ContainerComponent } from './container/container.component';
  import { NavComponent } from './nav/nav.component';
  
  
  // add animaitons for material 
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  // add CDK layout for material
  import { LayoutModule } from "@angular/cdk/layout";
  // add material to module
  import { MaterialModule } from "./class/material.module"
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule, ReactiveFormsModule,
      BrowserAnimationsModule,
      LayoutModule,
      MaterialModule
    ],
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      NavigationComponent,
      ContainerComponent,
      NavComponent
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>I find this code in <a href="https://stackoverflow.com/questions/45166844/how-to-import-angular-material-in-project">similar question</a>, but when is add it in a separate file and then importing to the <code>app.module.ts</code>, my app stop working and just I will see the loading message in the browser. <strong>(Updated code)</strong></p>
  
  <pre><code>import { NgModule } from "@angular/core";
  
  import { 
    MatButtonModule, 
    MatToolbarModule, 
    MatSidenavModule, 
    MatCheckboxModule,
    MatIconModule,
    MatListModule
   } from "@angular/material";
  @NgModule({
    imports: [
      MatButtonModule,
      MatToolbarModule,
      MatSidenavModule,
      MatCheckboxModule,
      MatIconModule,
      MatListModule
    ],
    exports: [
      MatButtonModule,
      MatToolbarModule,
      MatSidenavModule,
      MatCheckboxModule,
      MatIconModule,
      MatListModule
    ]
  })
  export class MyMaterialModule {}
  </code></pre>
  
  <p><strong>(Updated)</strong>
  For now, I just fix the <code>material.module.ts</code> in my class folder, but still, I can't add other components. like the following components: </p>
  
  <pre><code>import {
    MatNativeDateModule,
    MatSnackBarModule,
    MatDialogModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatTabsModule,
    MatCheckboxModule,
    MatCard,
    MatCardModule,
    MatFormField,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule
  } from "@angular/material";
  import { MatDatepickerModule } from "@angular/material/datepicker";
  import { MatRadioModule } from "@angular/material/radio";
  import { MatSelectModule } from "@angular/material/select";
  import { MatSliderModule } from "@angular/material/slider";
  import { MatDividerModule } from "@angular/material/divider";
  </code></pre>