Angular Material – Using with Angular 2 and ASP.NET Core 1.0

Angular Material 2 is a set of high-quality UI components built with Angular 2 and TypeScript, following the Material Design spec. It’s built by Angular team so that it fits in Angular 2 seamlessly. Know more of it here

Why Angular Material design?

  • Internationalized and accessible so that all users can use them.
  • Browser and screen reader support
  • Code is clean and well-documented to serve as an example for Angular devs.
  • Fully tested across IE11 and current versions of Chrome, Edge, Firefox, and Safari.
  • Straightforward APIs that don’t confuse developers.

We will be integrating Angular Material UI components to ASP.NET Core 1.0 apps with Angular 2 using Visual Studio 2015 update 3. Installing TypeScript 2.0 RC is mandatory

Update October 2 – Updated to Angular Material 2 for Angular 2 final release on ASP.NET Core using webpack

Steps to add Angular Material

  1. Angular 2 & ASP.NET Core together
  2. Including Material packages in package.json
  3. Update gulpfile.js to move packages to wwwroot.
  4. Modify to systemjs.config.js to load material packages
  5. Import and use material UI components.

August 21 2016 – Updated with Angular 2 RC5, Angular Material Alpha 7 with NgModule

Step 1: Angular 2 & ASP.NET Core together

To use Angular Material UI components we need to have Angular 2 and ASP.NET Core 1.0 running together. For this follow Getting started with Angular 2 and ASP.NET Core here.

You can clone Github repo to start looking this implementation.

Step 2: Including Angular Material packages in package.json

All the Material packages can be installed using NPM, we need to add them to package.json.

All the Material 2 UI components are group into @angular/material to make it simple

Some of Material packages are button, card, checkbox, grid-list, menu etc. Read the full list of Material components.

Open the command prompt containing package.json and run below command to install Angular Material components.

The “–save” option will update your package.json to include material components.

Step 3: Import and use Material UI components using NgModule

Yes !! We are almost there, now lets import Angular 2 Material components into app.module.ts. The highlighted lines in below code are added to include all components. This is so super easy now

Step 4: Using md-icon (optional)

Material Design Icons can be added from Google API. Open clientsrc/index.html and add below code in head section

Step 5: Include UI components in template files

Open app.component.html to add UI components, at present we are showing only md-button, you can play around with other components

Running application

Now run npm start from command line & open browser, navigate localhost:3000 to see UI showing material UI components

Angular Material

 

 Check out the GITHUB repo to play around

You may also like...

17 Responses

  1. gerty says:

    followed exactly the steps in this tutorial, when I ran the task, I have got the following errors
    [12:26:43] Starting ‘ts’…
    C:/ngContacts/src/ngContacts/node_modules/@angular2-material/button/button.d.ts(28,14): error TS1005: ‘=’ expected.
    C:/ngContacts/src/ngContacts/node_modules/@angular2-material/button/button.d.ts(28,22): error TS1005: ‘;’ expected.
    C:/ngContacts/src/ngContacts/node_modules/@angular2-material/button/button.d.ts(29,14): error TS1005: ‘=’ expected.
    C:/ngContacts/src/ngContacts/node_modules/@angular2-material/button/button.d.ts(29,28): error TS1005: ‘;’ expected.
    [12:26:48] TypeScript: 4 syntax errors
    [12:26:48] TypeScript: emit failed

    Any ideas what I did wrong, I suspect it may be the typing version related

  2. Vinod Kumar says:

    Everything work great except styles on button and other components, Would you please tell me what css files to be included and how to include?

    • If you want material design components,then check out my blog on same. Do you want bootstrap?

      • Vinod Kumar says:

        Which blog can you send me url? I have already implemented material design as per your this blog but only thing that css styles not working properly while using button, card etc. Just want to know how to fix this.

  3. Brady Kelly says:

    I am trying to run the npm install in Visual Studio (which is a fine-tuned PowerShell), and I get an error for every module. The console complains about the “Unexpected token ‘/input'”, and about the “Unexpected token ‘-material’ in expression or statement”, and then gives a more verbose error, also for each module:

    “The splatting operator ‘@’ cannot be used to reference variables in an expression. ‘@angular2’ can be used only as an argument to a command. To reference variables in an expression use ‘$angular2’.”

  4. I am new to Angular 2 and trying to figure out how to use this with my new project. What would be the recommended way add component templates? In the example, I understand, for simplicity sake, added templates inline – but not a good option for real projects. Thanks

    • Yes, inline templates not recommended for real projects. I would recommended this
      1. In ASP.NET Core apps wwwroot, create ‘views’ folder. Then add your component’s HTML files
      2. Refer this path HTML path in components templateurl section instead of just template. Components will be in TS files.

      Since we are transpiling the TS files into wwwroot folder, creating HTML file there would help us showing HTML UI. Also you can work with Router too

      • nbl says:

        I don’t think a views folder in the wwwroot folder is required. you can refer to your mvc path under your controllers folder itself. if you have a home controller and it has a corresponding index view then at run time you get a virtual folder Home/Index. You can point your template url to this path and have the same entry made in your routing.ts file too

  5. Hello , is it possible to have a tutorial with Angular Angular Material CLI + 2 + AspCore ? I try to combine the three but still too many problems ..

  1. August 2, 2016

    […] First Steps: Exploring .NET Core and ASP.NET Core – Rick Strahl’s Web Log  Angular Material – Using with Angular 2 and ASP.NET Core 1.0  Parameter Binding In ASP.NET Web API  Microsoft Is Mobilizing DevOps — […]

Leave a Reply