Creating a Shared Angular Material Module

Photo by Annie Spratt on Unsplash

Scenario

We are creating a shared Angular Material module and we want to avoid avoid having two copies of the same array on both @NgModule imports and exports.

Approach

First import the Angular Material Modules being used. Here’s an example:

import {
MatTabsModule,
MatSnackBarModule
} from '@angular/material';

Then add these to an array:

const mm = [ MatTabsModule, MatSnackBarModule ];

Then expand the array in the imports property ( … operator ) and add it to the exports property and the MaterialModule is ready to go.

@NgModule({
imports: [...mm],
exports: mm
})
export class MaterialModule {}

Now just import it into the other modules that will be using the material components.