Using Material components in Angular 2
Figuring out how to incorporate Material Design components in Angular 2 can be a tricky prospect — if you are also serious about automated testing. There is great documentation on setting up Material, but it actually takes a fair bit of research to figure out how to ensure that incorporating a <md-toolbar>
won’t cause ng test
to start throwing a myriad of nigh unintelligible errors. I’ve done that research :D
Basic Setup with Angular CLI
(this assumes you have a recent version of node — I’m using v7, v6 would work as well).
Install Angular CLI
npm install -g @angular/cli
Create a new project
ng new <your-project-name>
Install the Angular Material components
(you can skip the hammerjs install if you don’t intend to use sliders)
npm install --save @angular/material
npm install --save hammerjs
Import the Angular Material NgModule
Look in the project you created with ng new
above. There should be a src/app/app.module.ts
file. You need to import the Material module and add it to the @NgModule
imports and import hammerjs.
import { MaterialModule } from '@angular/material';import 'hammerjs';
@NgModule({
imports: [MaterialModule],
...
})
Add a Material theme to your Application
I recommend looking at the official docs for this, they’re awesome.
Start using Material in your Components
It’s as simple as adding a md-toolbar
where you want one. Again the official docs are amazing. For every component, there’s a wealth of information describing it and how you’d use it, plus there are example code snippets you can copy for your own use.
And, then, you realize all your tests broke
At this point, everything should be working, you’ve bootstrapped your app, you’ve integrated Material into it, you’re using the Material components, and you run ng-test
and are greeted with a wall of red.
The fix you’re looking for is this:
- import Material Module into your test
spec
file - add
imports:[MaterialModule.forRoot()]
into the object you’re using to configure your TestBed
Here’s a snippet showing this in action:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MaterialModule } from '@angular/material'; // add this line
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[MaterialModule.forRoot()], // and this line
declarations: [ HeaderComponent ]
})
.compileComponents();
}));
});
Happy Coding :D