8.10.2017

Angular Starter Project with Material

Follow angular setup from this post.
Reference posts from here and here. And from a starter project.

1. Create angular project
$ ng new management-gui
$ cd management-gui

2. Get Angular Material
$ yarn add @angular/material @angular/animations @angular/cdk

3. Get HammerJs and add to .angular-cli.json
$ yarn add hammerjs
$ vi .angular-cli.json
"scripts": [
  "../node_modules/hammerjs/hammer.min.js"
],

4. Add Angular Material on to app.module.ts
$ vi src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';

import { AppComponent } from './app.component';

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

5. Set global styles.css with an Angular Material theme
$ vi src/styles.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

6. Add Material icons in index.html
$ vi src/index.html



No comments:

Post a Comment