Angular2: Step by Step guide of using Angular Material 2 with Angular2 & Typescript for ASP.NET Core in Visual Studio 2015

Standard

Angular Material 2.0.0 has been released recently for Angular 2. In order to integrate Angular Material in project, follow the below steps:

Step 1: Install npm package for angular material, hammerjs, material typing

npm install --save @angular/material hammerjs
npm install --save-dev @types/angular-material @types/hammerjs

screenshot_6

Note:
The slide-toggle and slider components have a dependency on HammerJS.

Step 2: Include hammerjs to the types section of tsconfig.json file

{
  "compilerOptions": {
    "types": [
      "hammerjs"
    ]
  }
}

 

Step 3: Include @angular/material to the SystemJS configuration in case project is SystemJS for module loading

System.config({
  map: {
    ...,
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js'
  }
});

Note:
Actual material 2 website state ‘npm:@angular/material/material.umd.js’ but I am getting error by systemjs, unable to find materialjs file, so simple solution is fix in url: ‘npm:@angular/material/bundles/material.umd.js’

Step 4: Include material css and hammerjs explicitly in _Layout.cshtml

 @{ var lib = "@angular"; }

<environment names="Development">
  <link href="~/node_modules/@lib/material/core/theming/prebuilt/indigo-pink.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  http://~/node_modules/hammerjs/hammer.min.js
</environment>

 

Step 5: Import the Angular Material NgModule

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { MaterialModule } from '@angular/material';
import 'node_modules/hammerjs/hammer.js';

import { DashboardMainModule } from './dashboard/dashboard.module';
import { AppComponent } from './app.component';
import { AppRoutingModule  } from './app.routing';
import { APP_PROVIDERS } from './app.provider';

@NgModule({
    imports: [
        //angular builtin module
        BrowserModule,
        HttpModule,

        //ui module
        MaterialModule.forRoot(),

        //application feature module
        DashboardMainModule,
        AppRoutingModule 
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        APP_PROVIDERS
    ],
    bootstrap: [
        AppComponent
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppModule {
}

Finally material integration is done and running.

screenshot_7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s