Skip to content

Instantly share code, notes, and snippets.

@rajasharma1603
Created April 11, 2020 15:14
Show Gist options
  • Save rajasharma1603/8bdf9c11e28615364dffbb6c85360c43 to your computer and use it in GitHub Desktop.
Save rajasharma1603/8bdf9c11e28615364dffbb6c85360c43 to your computer and use it in GitHub Desktop.
One single module import file to import all Angular Material Modules.
// IMPORT ALL MATERIAL COMPONENTS
// #STEPS
// 1- Import this file as module in app.module.ts ==> import { MaterialModule } from './xyz/abc';
// 2- Initialize it in imports:[] array ==> imports:[MaterialModule]
import { NgModule } from '@angular/core';
// *************** FORM CONTROLS ***************
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatDatepickerModule} from '@angular/material/datepicker';
import{MatNativeDateModule} from '@angular/material/core' //FROM ANGULAR CORE
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
// *************** NAVIGATION ***************
import {MatMenuModule} from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
// *************** LAYOUT ***************
import {MatCardModule} from '@angular/material/card';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatListModule} from '@angular/material/list';
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';
import {MatTreeModule} from '@angular/material/tree';
// *************** BUTTONS & INDICATORS ***************
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatBadgeModule} from '@angular/material/badge';
import {MatChipsModule} from '@angular/material/chips';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatRippleModule} from '@angular/material/core';
// *************** POPUPS & MODALS ***************
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatDialogModule} from '@angular/material/dialog';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip';
// *************** DATA TABLE ***************
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
const AllMaterialModules=[
MatAutocompleteModule,
MatCheckboxModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatCardModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatListModule,
MatStepperModule,
MatTabsModule,
MatTreeModule,
MatButtonModule,
MatButtonToggleModule,
MatBadgeModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatRippleModule,
MatBottomSheetModule,
MatDialogModule,
MatSnackBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
];
@NgModule({
imports: [AllMaterialModules],
exports: [AllMaterialModules],
})
export class MaterialModule {}
@yogesh-aggarwal
Copy link

Thanks a lot, dude!

@EdwardAngeles
Copy link

Awesome! This is a greate help when learning or just to save a bunch of time!

@cristhianA94
Copy link

Thanks a lot dude!

@Kexplx
Copy link

Kexplx commented Aug 24, 2020

thank you

@hrithikwins
Copy link

Just awesome Bro
Thank you for reducing my task

@LuisLG007
Copy link

Thank so Much <3

@camiloblanco
Copy link

Hello,

I'm getting trouble to make this work on Angular 11, and Ionic 5, any advice?

@hrithikwins
Copy link

hrithikwins commented Feb 14, 2021

Hello,

I'm getting trouble to make this work on Angular 11, and Ionic 5, any advice?

To Guide you better,

  • Create a file named material.module.ts and paste this contents
  • Next in your project app.module.ts which is generally src/app/app.module.ts just import the MaterialModule
  • Now you can simply use all the material components.. It worked in angular 9/10 but since 11, I am working back with react.js, flutter and - -other technologies so please let me know if am wrong..
    Thank you 😄

@camiloblanco
Copy link

Thank you for answering!

Your instructions are very clear, and your file good.

I have been trying this for a couple of days and it simply does not work on Angular 11. The MaterialModule is simply not global when imported in the app.module.ts, so it has to be imported in all other modules that require it ... very annoying.

I may just jump back to vue/vuetify :)

@mastersamm-db
Copy link

Necessary update angular material 12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment