Evolution and Practical Guide to Angular Material Module Importing

Evolution of Angular Material Module System

In the Angular development ecosystem, the importing approach for Material Design component libraries has undergone significant evolution. In early versions, developers could import all Material components through a single MaterialModule. While convenient, this approach revealed performance and maintenance limitations as the number of components grew and the need for tree-shaking optimization became apparent.

Modern Angular Material Importing Approach

Starting from Angular 9.0.1, the root index.d.ts barrel file no longer provides bulk export functionality. This means developers need to import specific component modules on-demand. Below is a standard module configuration example:

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';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

Detailed Breaking Changes

MaterialModule was deprecated in version 2.0.0-beta.3 and completely removed in version 2.0.0-beta.11. This change introduced several important breaking changes:

• Angular Material now requires Angular 4.4.3 or higher
• MaterialModule has been completely removed
• The "md" prefix is fully deprecated, unified use of "mat" prefix

Complete Project Configuration Process

To integrate Material Design into a new Angular project, follow these steps:

Install Dependencies

npm install --save @angular/material @angular/animations @angular/cdk

Create Custom Material Module

Create a material.module.ts file in the app folder containing all required Material 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 {}

Import in Main Module

Import the custom Material module in app.module.ts:

import { MaterialModule } from './material.module';

Component Usage Examples

Below is a complete component template example demonstrating various Material component usage patterns:

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>
    <span>Yay, Material in Angular 2!</span>
    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Style Configuration

Add necessary imports in the global style file style.css:

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Component-level style configuration example:

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

Alternative Approach: Direct Importing

Instead of creating a custom MaterialModule, developers can choose to directly import required Material modules in app.module.ts:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  MatButtonModule, 
  MatCardModule, 
  MatMenuModule, 
  MatToolbarModule, 
  MatIconModule,
  MatAutocompleteModule,
  MatInputModule,
  MatFormFieldModule 
} from '@angular/material';

This approach avoids creating additional module files but may make the main module bloated. The choice between approaches depends on specific project requirements and team development standards.

Summary and Best Practices

The evolution of Angular Material module importing from unified to on-demand reflects modern frontend development's emphasis on performance and modularity. Developers should:

• Always use the latest Angular Material version
• Import specific modules on-demand to avoid unnecessary bundle size increases
• Use the "mat" prefix instead of the deprecated "md" prefix
• Choose between creating custom Material modules or direct importing based on project scale
• Regularly check official changelogs for the latest breaking changes

By following these best practices, developers can build beautiful and efficient Angular applications that fully leverage Material Design's design language and Angular's modular architecture advantages.