Angular 2 Material Replacing Bootstrap

In this weeks screencast we fully replace bootstrap with material components for angular 2. Material2 just announced their alpha 2 release, adding a bunch of components, perfect timing for live coding screencast, code at https://github.com/ajtowf/ng2_play. The ng2play repo has also been updated to the latest angular2 version which at the time of writing is beta 15, see the changelog for details.

During the coding session we integrate the following components into our app:

• md-card
• md-toolbar
• md-input

Make sure to check out the screencast below, enjoy!

Screencast

Documentation / Demo App

There isn’t any official documentation for material2 yet, but there is a demo app in their github repo, here are the steps to get it up and running on your local dev machine:

1. Make sure you have `node` installed with a version at _least_ 4.2.3.
2. Run `npm install -g angular-cli` to install the Angular CLI.
3. Clone the angular/material2 repo
4. From the root of the project, run `npm install`, then run `npm run typings` to install typescript definitions.
5. To build the project, run `ng build`.
6. To bring up a local server, run `ng serve`. This will automatically watch for changes and rebuild.

After the changes rebuild, the browser currently needs to be manually refreshed. Now you can visit the prompted URL in your browser to explore the demo app.

Resouces on Angular Material

To learn more about material deisgn and components for angular, make sure to check out my pluralsight course Angular Material Fundamentals.

Until next time, have a nice day folks and keep on coding!