3

What is the best way to import material modules into an Angular 8 project? Is it by importing the material.module.ts to app main module and then use it in other modules:

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 {}

Or simply import the mainly used modules of material in each module?

Per example, if I only used mat-card in ProductsModule, I simply import MatCardModule in the products module and be done with it.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
alim1990
  • 4,656
  • 12
  • 67
  • 130

4 Answers4

6

It completely depends on your where all the Components exposed by Angular Material would be used inside the App.

If only some components in some modules use components exposed by Angular Material, it would make sense to import these modules in the modules that those components are a part of.

Eg: Let's for arguments' sake say that your App has three modules: CartModule, CheckoutModule, ProfileModule. And only your CartModule uses one of the Angular Material Components. Also if this CartModule is Lazily Loaded. In this case, it would make a lot of sense to just import that particular Angular Material Module in the CartModule.

This, however, won't be the case in most of the scenarios.

In most of the cases and being mindful of a consistent look and feel, we generally tend to use a lot of Components exposed by Angular Material modules throughout the App. So in that case, to make it more uniform and manageable, we generally create an AppMaterialModule the way you've done in the question itself. And then we import this module in the modules where we want to use these components in. And if we are to use these components throughout different modules across the application, we generally import the AppMaterialModule in the SharedModule and export it from there. That way, the components that we've exposed as a part of the AppMaterialModule would be accessible throughout the App.

Hope this clears your doubts.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
1

best way is import in each component only that he need, in app.module.ts only global services. works with angular more that 2 years and didn't find best solution

Никита Середа
  • 1,991
  • 1
  • 14
  • 34
1

Yes, if this is the case

if I only used mat-card in products module, I simply import MatCardModule.

That would work as well.

But later if you want to use it in B module, you should not import it in that as well. But move MatCarModule to MaterialModule.

And MaterialModule should be imported and exported by Shared module.

Importing it directly in each module is not recommended, due to two reasons :

  1. If B and Products module are lazy loaded, then same MatCardModule will end up in both of the chunks (which is bad)
  2. Since this is a Component Module, it's highly likely that we will end up using it in other places as well.So MaterialModule way is preferred.
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
ishan srivastava
  • 363
  • 1
  • 3
  • 10
1

Well, if you are using angular material components accross entire app, you should put your angular material module inside share modules, some like this maybe shared/modules/material.modules.ts, but in case you only have some fews components in your app, you should onlye importa material module inside thats particular components...

Victor Pinedo
  • 21
  • 3