Sharing Top Content from the Angular-sphere.

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

  • Let import Angular Material as a dependency to our angular project.
  • Setting up an Angular 2 application with Angular CLI and Angular Material
  • We will scaffold a quick layout using angular material.
  • The post is part of a series that will cover how I create a small app with Angular 2 using Angular Material and Firebase.
  • To give us an initial start I am going to be using a pre-built theme that is packaged with 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…

@smokenight: Setting up an Angular 2 application with Angular CLI and Angular Material – @angularjs

to create our angular 2 seed project.

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.

. We will be using scss for our styling.

below in the install command.

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.

import { MaterialModule } from ‘@angular/material’;

import ‘hammerjs’;

declarations: [

imports: [

providers: [],

bootstrap: [AppComponent]

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

and add the below lines to the top of the file.

@import url(‘https://fonts.googleapis.com/icon?family=Material+Icons’);

component from angular material.

list-style: none;

display: inline;

font-size: 12px;

cursor: pointer;

content: ‘|’;

padding: 5px;

 — you should see the below.

Next post : Setting up router and initial component architecture

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

Comments are closed, but trackbacks and pingbacks are open.