How to use angular/material version 7.0.1 component in my project?

Question

I start, learning the Angular with Google Material Design, so far so good, I create my front-end app with the official documentation from https://angular.io/tutorial and https://material.angular.io/guides websites.

I read a similar question but that won't work for me, my app uses the Angular 7.0.0 with Angular Material 7.0.0.

So, I want to use most of the Angular Material Components in my demo app, what is the best way to have, all of them.

I read many articles and tutorials like Getting Started With Angular Material 2 or this one, 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?

My app.module.ts with basic component:(Updated 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 {}

I find this code in similar question, but when is add it in a separate file and then importing to the app.module.ts, my app stop working and just I will see the loading message in the browser. (Updated 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 {}

(Updated) For now, I just fix the material.module.ts in my class folder, but still, I can't add other components. like the following components:

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";

Answer 1

You need to use comman module while using seprate file:

1] material.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';

import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule
  ],
  imports: [CommonModule],
  declarations: []
})
export class MaterialModule {}

2. app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { NgForm,ReactiveFormsModule } from '@angular/forms';

import {
  HttpClient,
  HTTP_INTERCEPTORS,
  HttpClientModule
} from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
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';
import { LayoutModule } from "@angular/cdk/layout";
@NgModule({
  declarations: [
   AppComponent,
    HeaderComponent,
    FooterComponent,
    NavigationComponent,
    ContainerComponent,
    NavComponent,
    NgForm
  ],
  imports: [
    CommonModule,
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
LayoutModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }