Setting up an Angular 2 application with Angular CLI and Angular Material

This post is part of a series that will cover how I create a small app with Angular 2 using Angular Material and Firebase. I will be using HackerNews Firebase API to build this out. We will scaffold a quick layout using angular material. We will use angular-cli to create our angular 2 seed project.

$ npm install -g angular-cli 

This will install angular-cli as global. Angular CLI provides various commands that includes starting a project, deploying project in various environments, configurations, generating components/pipes/services/modules/directives, linting, testing and many more. Please refer to README file on their github repo.

$ ng new hn-ng2-clone --style=sass

This will create a new project called hn-ng2-clone and perform npm install. We will be using scss for our styling.

When you inspect the package.json you will see few npm commands. cd into the project directory and run ng serve, this will spin up a local development server at http://localhost:4200. Now lets’ import Angular material to this project. Angular material is published as part of the angular namespace and you see the @angular below in the install command.

$ npm install @angular/material hammerjs --save

We are installing hammerjs as it is a dependency for angular material components like md-slide-toggle and md-slider. You need to import this only if you are using those components.

If you look under node_modules/@angular you can see material folder present.

Now, let import Angular Material as a dependency to our angular project. Navigate to hg-ng2-clone/src/app/app.module.ts

import { MaterialModule } from '@angular/material';
import 'hammerjs';

Once we have imported the modules we have to import them to our AppModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,    
    MaterialModule.forRoot() 
 ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

MaterialModule.forRoot() registers the providers in the application wide context. You can read more about forRoot() here.

To give us an initial start I am going to be using a pre-built theme that is packaged with angular material. So navigate to src/styles.css and add the below lines to the top of the file.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.css';

You can browse the @angular/material node_modules to see the themes delivered. node_modules/@angular/material/core/theming/prebuilt

Now we have completed our setup. Navigate to app.component.html. We are going to keep it simple and just add the layout to our app component. We are going to have a simple nav bar for our app. I am using md-toolbar component from angular material.

<md-toolbar color="primary">
  <div>HN-Ng2</div>
  <nav>
    <ul>
      <li>New</li>
      <li>Comments</li>
      <li>Show</li>
      <li>Ask</li>
      <li>Jobs</li>
    </ul>
  </nav>
</md-toolbar>

To add some styling for nav, navigate to app.component.scss

ul {
   list-style: none;
}
li {
  display: inline;
  font-size: 12px;
  cursor: pointer;
  &::after {
    content: '|';
    padding: 5px;
  }
  &:last-child::after {
    content : '';
  }
}

Open the browser at http://localhost:4200 — you should see the below.

Next post : Setting up router and initial component architecture