First, we must install the Angular 2 CLI so that we can use it to generate a new Angular 2 project. Using npm we will install and configure Material Design for Angular 2 into our project. Lastly, we will add a custom SCSS style sheet and get Angular CLI to load it in for us.
The code for this project is hosted on my Github. Feel free to fork and use freely!
The End Result:
The Angular CLI makes it easy to get up and running with a project that is set up using the best practices.
As a developer who has spent a lot of time using Symfony and Composer, I feel right at home using the Angular 2 CLI. The CLI also has commands to generate components, routes, services, pipes and prepare your application for production.
Material Design for Angular 2 is built using the Material Design specs built on top of Angular 2.
Note: Material Design for Angular 2 is currently in Alpha, but most of the desired functionality is there and it is currently in developement. That being said you will have to upgrade through npm to use new features as they become available.
Installation should be as simple as installing NodeJS and npm comes with with.
IMPORTANT: You must have NodeJS 4 or higher AND npm 3 or higher. When downloading NodeJS note that the LTS version of Node comes with npm 2.15.9. If you are about to install Node, get the Current/Latest Features download. You can also update npm from the command line npm install -g npm.
Install Angular 2 CLI & Create Project
To install the Angular 2 CLI run this command:
npm install -g angular-cli
The first time running this command I had trouble getting it to work. I had a package installed globally that conflicted. If you have issues, post your error message in the comments and I’ll try to help!
We now can use the ng command in a terminal window. To create a new project we simply type:
Note: Creating the new project can take a few minutes on a slower computer.
ng new my-project-name
A new project will be made inside of the folder my-project-name.
Note: In Angular 2 it is convention to spell our file names with dash case so there are no worries about case sensitity on the server, across dev environments and in our Version Control.
To start the dev server and see the live product run these commands:
cd my-project-name ng serve
My favorite feature of using ng serve is that it watches your files for changes. Upon noticing them it automatically reloads the browser for you!
Open your browser and point it to http://localhost:4200. You should see:
Install Material Design for Angular 2 through npm
To add Material Design for Angular 2 to our project run the command:
npm install --save @angular/material
Note: --save adds this to our package.json file for us.
If you run into errors running the above command make sure you have the correct version of NodeJS and npm installed.
Next in our src/app/app.module.ts file we need to import the MaterialModule at the top. Then we need to register it for root in the imports section. After doing this my file looks like this:
Note: Do not change the contents of any file in node_modules they will get over written on the next npm install.
Angular CLI has a built in SCSS compiler. All we have to do is let it know that the new SCSS file is there. We do this by editing our angular-cli.json file. We want to edit the styles section to look like this:
Once you have added all of that you should be able to run ng serve and see the final product! You can also press the TOGGLE DARK THEME button and see the dark theme.
Now we have a solid start to build an Angular 2 application, using Angular 2 Material Design. Angular 2 Material Design may still be in Alpha, but it will grow quick. Soon it will be the same standard just like there was Angular 2 Material
Personally I would rearrange the filesystem so the project won’t get out of control as it grows.
If you ran into any hiccups or have any questions, please let me know! I’m happy to help :)