How to import Angular Material in project

Question

I have installed Angular Material Design  Now I try to add this in app module ts file   import   MaterialModule   from   angular material     What I should decify in section  imports      that to load all material entities   I tried  imports    MaterialModule   but it is deprecated

User · Answer

If you want to import all Material modules  create your own module i e  material module ts and do something like the following    x000D   x000D  import   NgModule   from   angular core   x000D  import   as MATERIAL MODULES from   angular material   x000D   x000D  export function mapMaterialModules     x000D    return Object keys MATERIAL MODULES  filter  k    gt    x000D      let asset   MATERIAL MODULES k   x000D      return typeof asset     function  x000D         amp  amp  asset name startsWith  Mat   x000D         amp  amp  asset name includes  Module    x000D       map  k    gt  MATERIAL MODULES k    x000D    x000D  const modules   mapMaterialModules    x000D   x000D   NgModule   x000D      imports  modules  x000D      exports  modules x000D     x000D  export class MaterialModule     x000D   x000D   x000D    Then import the module into your app module ts

User · Answer

Import all Angular Material modules in Angular 9   Create material module ts file in your project src app  directory and paste this code    import   NgModule   from   angular core   import   CommonModule   from   angular common     import   BrowserAnimationsModule   from   angular platform-browser animations   import   MatCheckboxModule   from   angular material checkbox   import   MatButtonModule   from   angular material button   import   MatInputModule   from   angular material input   import   MatAutocompleteModule   from   angular material autocomplete   import   MatDatepickerModule   from   angular material datepicker   import   MatFormFieldModule   from   angular material form-field   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   import   MatMenuModule   from   angular material menu   import   MatSidenavModule   from   angular material sidenav   import   MatBadgeModule   from   angular material badge   import   MatToolbarModule   from   angular material toolbar   import   MatListModule   from   angular material list   import   MatGridListModule   from   angular material grid-list   import   MatCardModule   from   angular material card   import   MatStepperModule   from   angular material stepper   import   MatTabsModule   from   angular material tabs   import   MatExpansionModule   from   angular material expansion   import   MatButtonToggleModule   from   angular material button-toggle   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   MatDialogModule   from   angular material dialog   import   MatTooltipModule   from   angular material tooltip   import   MatSnackBarModule   from   angular material snack-bar   import   MatTableModule   from   angular material table   import   MatSortModule   from   angular material sort   import   MatPaginatorModule   from   angular material paginator      NgModule        imports            CommonModule          BrowserAnimationsModule          MatCheckboxModule          MatCheckboxModule          MatButtonModule          MatInputModule          MatAutocompleteModule          MatDatepickerModule          MatFormFieldModule          MatRadioModule          MatSelectModule          MatSliderModule          MatSlideToggleModule          MatMenuModule          MatSidenavModule          MatBadgeModule          MatToolbarModule          MatListModule          MatGridListModule          MatCardModule          MatStepperModule          MatTabsModule          MatExpansionModule          MatButtonToggleModule          MatChipsModule          MatIconModule          MatProgressSpinnerModule          MatProgressBarModule          MatDialogModule          MatTooltipModule          MatSnackBarModule          MatTableModule          MatSortModule          MatPaginatorModule             exports            MatButtonModule          MatToolbarModule          MatIconModule          MatSidenavModule          MatBadgeModule          MatListModule          MatGridListModule          MatInputModule          MatFormFieldModule          MatSelectModule          MatRadioModule          MatDatepickerModule          MatChipsModule          MatTooltipModule          MatTableModule          MatPaginatorModule            providers            MatDatepickerModule             export class AngularMaterialModule

User · Answer

Step 1   yarn add  angular material  angular cdk  angular animations      Step 2 - Create a new file   myApp src app material module ts   that includes all the material UI modules  there is no shortcut  you have to include individual modules one by one    import   NgModule   from   angular core        import         MatButtonModule        MatMenuModule        MatToolbarModule        MatIconModule        MatCardModule       from   angular material         NgModule         imports            MatButtonModule          MatMenuModule          MatToolbarModule          MatIconModule          MatCardModule                exports            MatButtonModule          MatMenuModule          MatToolbarModule          MatIconModule          MatCardModule                    export class MaterialModule         Step 3 - Import and add that newly created module to your   app module ts   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   AppComponent   from    app component   import   MaterialModule   from    material module      material module imported   NgModule     declarations        AppComponent        imports        BrowserModule      MaterialModule    MAteria module added        providers        bootstrap   AppComponent     export class AppModule

User · Answer

Starting from Angular version 9      Breaking changes       Components can no longer be imported through   angular material   Use   the individual secondary entry-points  such as    angular material button    This means that   import   MatInputModule  MatCardModule   from   angular material     becomes   import   MatInputModule   from   angular material input   import   MatCardModule   from   angular material card

User · Answer

I am using Angular CLI 9 1 4 and all i did was just run   ng add  angular material   And all the angular material packages were installed and my package json file was updated   This is the easiest way to get that done

User · Answer

Install  amp  Add Material to Angular Projects  There is an automatic easy way of adding Material to Angular Projects  Use the Angular CLI s install schematic to set up your Angular Material project by running the following command   ng add  angular material   The ng add command will additionally perform the following configurations    Add project dependencies to package json Add the Roboto font to your index html Add the Material Design icon font to your index html Add a few global CSS styles to    Remove margins from body Set height  100  on html and body Set Roboto as the default application font    You re done  Angular Material is now configured to be used in your application   Read more about this here

User · Answer

The MaterialModule was deprecated in the beta3 version with the goal that developers should only import into their applications what they are going to use and thus improve the bundle size   The developers have now 2 options    Create a custom MyMaterialModule which imports exports the components that your application requires and can be imported by other  feature  modules in your application  Import directly the individual material modules that a module requires into it    Take the following as example  extracted from material page   First approach   import  MdButtonModule  MdCheckboxModule  from   angular material     NgModule     imports   MdButtonModule  MdCheckboxModule     exports   MdButtonModule  MdCheckboxModule      export class MyOwnCustomMaterialModule       Then you can import this module into any of yours   Second approach   import  MdButtonModule  MdCheckboxModule  from   angular material     NgModule           imports   MdButtonModule  MdCheckboxModule            export class PizzaPartyAppModule       Now you can use the respective material components in all the components declared in PizzaPartyAppModule  It is worth mentioning the following    With the latest version of material  you need to import BrowserAnimationsModule into your main module if you want the animations to work With the latest version developers now need to add  angular cdk to their package json  material dependency  Import the material modules always after BrowserModule  as stated by the docs        Whichever approach you use  be sure to import the Angular Material   modules after Angular s BrowserModule  as the import order matters for   NgModules

User · Answer

Click here to see Error message screenshot  If you people are getting this error  compiler js 2430 Uncaught Error  Unexpected directive  MatIcon  imported by the module  AppModule   Please add a  NgModule annotation   Please do not import MatIcon from  angular material   Just Import below   import   MatIconModule   from   angular material      How to import Angular Material   You can run below command  ng add  angular material

User · Answer

You should consider using a SharedModule for the essential material components of your app  and then import every single module you need to use into your feature modules  I wrote an article on medium explaining how to import Angular material  check it out  https   medium com  benmohamehdi how-to-import-angular-material-angular-best-practices-80d3023118de

User · Answer

UPDATE for Angular 9 0 1  Since this version there is no barrel file for massive exports in the root index d ts  The assets imports should be   import   NgModule   from   angular core   import   MatCardModule   from   angular material card   import   MatButtonModule  from   angular material button   import   MatMenuModule   from   angular material menu   import   MatToolbarModule   from   angular material toolbar   import   MatIconModule   from   angular material icon    import     MatButtonModule    MatMenuModule    MatToolbarModule    MatIconModule    MatCardModule   from   angular material     NgModule     imports        MatButtonModule      MatMenuModule      MatToolbarModule      MatIconModule      MatCardModule        exports        MatButtonModule      MatMenuModule      MatToolbarModule      MatIconModule      MatCardModule        export class MaterialModule      source   angular material index d ts  is not a module    MaterialModule was depreciated in version 2 0 0-beta 3 and it has been removed completely in version 2 0 0-beta 11  See this CHANGELOG for more details  Please go through the breaking changes   Breaking changes   Angular Material now requires Angular 4 4 3 or greater  MaterialModule    has been removed  For beta 11  we ve made the decision to deprecate the  md  prefix completely and use  mat  moving forward    Please go through CHANGELOG we will get more answer   Example shown below cmd    npm install --save  angular material  angular animations  angular cdk npm install --save angular material2-builds angular cdk-builds   Create file  material module ts  inside the  app  folder  import   NgModule   from   angular core    import     MatButtonModule    MatMenuModule    MatToolbarModule    MatIconModule    MatCardModule   from   angular material     NgModule     imports        MatButtonModule      MatMenuModule      MatToolbarModule      MatIconModule      MatCardModule        exports        MatButtonModule      MatMenuModule      MatToolbarModule      MatIconModule      MatCardModule        export class MaterialModule      import on app module ts  import   MaterialModule   from    material module     Your component html file    lt div gt     lt mat-toolbar color  primary  gt       lt span gt  lt mat-icon gt mood lt  mat-icon gt  lt  span gt        lt span gt Yay  Material in Angular 2  lt  span gt        lt button mat-icon-button  mat-menu-trigger-for   menu  gt         lt mat-icon gt more vert lt  mat-icon gt       lt  button gt     lt  mat-toolbar gt     lt mat-menu x-position  before   menu  matMenu  gt       lt button mat-menu-item gt Option 1 lt  button gt       lt button mat-menu-item gt Option 2 lt  button gt     lt  mat-menu gt      lt mat-card gt       lt button mat-button gt All lt  button gt       lt button mat-raised-button gt Of lt  button gt       lt button mat-raised-button color  primary  gt The lt  button gt       lt button mat-raised-button color  accent  gt Buttons lt  button gt     lt  mat-card gt      lt span class  done  gt       lt button mat-fab gt         lt mat-icon gt check circle lt  mat-icon gt       lt  button gt     lt  span gt   lt  div gt    Add global css  style css     import  https   fonts googleapis com icon family Material Icons    import    angular material prebuilt-themes indigo-pink css      Your component css  body     margin  0    font-family  Roboto  sans-serif     mat-card     max-width  80     margin  2em auto    text-align  center     mat-toolbar-row     justify-content  space-between      done     position  fixed    bottom  20px    right  20px    color  white      If any one didn t get output use below instruction  instead of above interface  material module ts  u can directly use below code also in the app module ts    import   FormsModule  ReactiveFormsModule   from   angular forms   import   BrowserAnimationsModule   from   angular platform-browser animations   import   MdButtonModule  MdCardModule  MdMenuModule  MdToolbarModule  MdIconModule  MatAutocompleteModule  MatInputModule MatFormFieldModule   from   angular material     So this case u don t want to import   import   MaterialModule   from    material module     in the app module ts

[angular] How to import Angular Material in project?

Examples related to angular

Examples related to angular-material