DEV Community

John Peters
John Peters

Posted on

Shared Modules in Angular

Using Angular Material in your app.module.ts file causes too much clutter. Why not create a shared module which only contains material modules.

From your root type in

ng g m matshared
Enter fullscreen mode Exit fullscreen mode

Then import the Material Modules needed and export them.

import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
  // Leave this blank
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatToolbarModule,
    MatTooltipModule,
  ],
})
export class MatSharedModule {}
Enter fullscreen mode Exit fullscreen mode

Now go back to the app.module.

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

import { MatSharedModule } from './matshared.module';
import { NgModule } from '@angular/core';



@NgModule({
  declarations: [AppComponent, MainComponent],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    MatSharedModule,

  ],
  exports: [MatSharedModule,],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Other feature modules can share this matSharedModule too. Just import and put entry into imports array to use.

import { MatSharedModule } from '../matshared.module';

imports: [
 CommonModule,
 MatSharedModule,   
],
Enter fullscreen mode Exit fullscreen mode

Simple, when we know how.

JWP2021

Top comments (1)

Collapse
 
khizerrehandev profile image
khizerrehandev •

Thanks for sharing. just need to get your thoughts

why MatSharedModule is exported from AppModule?

Read next

isheanesu_dev profile image

How To Make An Insanely Fast AI App (Supabase, LLAMA 3 and Groq)

Isheanesu -

ellalily profile image

How To Create Ai Bot With Whatsapp

ellalily -

marcosviana profile image

Remix com importação automática. Tenha um código mais limpo.

Marcos Viana -

anayatglobal profile image

Trusted Mobile and Web Development Partner for Your Business

Anayat global works -