Import Angular Material Components as a Feature Module
Import Angular Material

Import Angular Material Components as a Feature Module

Are you just getting started with Angular and interested in properly importing Angular Material components in your web app project? While getting started with Angular is very easy, it does not come with any UI controls. For this reason, many web developers prefer using Angular Material to add buttons, form controls, menus, data tables to speed up the development of data-driven applications.

In this post, we will import Angular Material components based on a scalable project structure with the steps below.

  • Install Angular Material from npm
  • Generate a feature-module called CustomMaterial
  • Import required Material components into the CustomMaterialModule.
  • Export all imported components inside the CustomMaterialModule so that our application knows these components.
  • Import the CustomMaterialModule in your root module app.module.ts.

Getting Started with Angular Material for Web Apps

Google created Angular Material as an open-source project to provide a set of reusable user interface components based on its Material Design principles. All components in Angular Material library come with built-in support for animations, themes and typography.

Many people follow the official documentation to include Material components in their Angular project. The guide suggests two approaches to import components; either import every component in required modules or create a separate module to keep Material-related imports and configurations.

While it is acceptable to import components directly to the root module i.e. app.module or multiple modules, you really should create a separate module for Material for a real-world project because:

The steps to properly import Angular Material are:

  • Adding Material directly to the app.module will quickly increase the size of the module, which makes it more difficult to manage the module.
  • If you ever wanted to replace the UI components with a new framework like Kendo-UI, it will be harder to do as Material imports are all scattered in the project or in the app.module.
  • Importing Material in required modules is against the DRY principle of software development. Imagine how many times you need to configure the calendar or import the button component in multiple modules.

I assume that you already have a project in place. If you don’t have one, create a new Angular project.

Importing Angular Material as a Feature Module

You can begin by installing the material package from NPM using the following command:

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

Generate a module for keeping Material component imports:

ng generate module CustomMaterial

This will not only create a new folder called custom-material but also a module definition for your imports. Next, open up the custom-material.module.ts file and import a button from the Material package. You need to export the button component, which makes it available to any module that imports the CustomMaterialModule.

//custom-material.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule
  ],
  exports: [
    MatButtonModule
  ]
})
export class CustomMaterialModule {}

With the above code in place, go to your root module and import the CustomMaterialModule, which makes all exported components available to the whole application.

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CustomMaterialModule } from './custom-material/custom-material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CustomMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

We can now use the button component from the Material library in a component:

<button mat-button>Hello</button>

Going forward, you can just import the components from Angular Material into the CustomMaterialModule and use them in your own components. For example, if you need to display icons, you need to import MatIconModule into the CustomMaterialModule.

Custom Components

You will reap the benefits of this approach, when the time comes to implement a custom feature into any of the Material components.

If, for example, you wanted to implement a select all option for Select component i.e.mat-select..

.. you can easily create a custom component inside the CustomMaterialModule and export it for the whole app. This way, you keep all related code in a single module, which makes it very easy to maintain the project.

Summary

To summarise, we looked at how you can import Angular Material components as a feature module in your Angular applications. Although this guide is focused on the Material library, the concept can be applied to any kind of UI framework. You could, for instance, import Kendo UI dependencies through a feature module.

If you want to learn more, be sure to check out my free Angular Material starter template. It is built with Angular, Angular Material and other well-known open-source projects to speed up the development on your next project!

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

Leave a Reply

Close Menu

Free Template

Get your Angular Material application template to kick-start your next project.