Add angular-material UI choice

generators/app/prompts.js

@@ -88,6 +88,10 @@ module.exports = [
         value: 'bootstrap',
         name: 'Bootstrap (more website-oriented)'
       },
+      {
+        value: 'material',
+        name: 'Angular Material (more website-oriented)'
+      },
       {
         value: 'ionic',
         name: 'Ionic (more mobile-oriented)'

generators/app/templates/_package.json

@@ -52,6 +52,10 @@
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
     "bootstrap": "4.0.0-beta",
     "font-awesome": "^4.7.0",
+<% } else if (props.ui === 'material') { -%>
+	"@angular/cdk": "^2.0.0-beta.12",
+	"@angular/material": "^2.0.0-beta.12",
+	"font-awesome": "^4.7.0",
 <% } -%>
     "core-js": "^2.4.1",
     "lodash": "^4.17.4",

generators/app/templates/src/_main.scss

@@ -260,6 +260,8 @@
 <% } else if (props.ui === 'bootstrap') { -%>
 @import "~bootstrap/scss/bootstrap";
 @import "~font-awesome/scss/font-awesome.scss";
+<% } else if (props.ui === 'material') { -%>
+@import "~font-awesome/scss/font-awesome.scss";
 <% } -%>
 
 // Theme customization

generators/app/templates/src/app/__material.material.module.ts

@@ -0,0 +1,70 @@
+import { NgModule } from '@angular/core';
+import { CdkTableModule } from '@angular/cdk/table';
+import { OverlayModule } from '@angular/cdk/overlay';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+} from '@angular/material';
+
+@NgModule({
+  exports: [
+    // CDk
+    CdkTableModule,
+    OverlayModule,
+
+    // Material
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatSnackBarModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatNativeDateModule,
+  ]
+})
+export class MaterialModule { }

generators/app/templates/src/app/_app.module.ts

@@ -7,7 +7,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { TranslateModule } from '@ngx-translate/core';
-<% if (props.ui === 'bootstrap') { -%>
+<% if (props.ui === 'material') { -%>
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from './material.module';
+<% } else if (props.ui === 'bootstrap') { -%>
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 <% } else if (props.ui === 'ionic') { -%>
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
@@ -35,7 +38,10 @@ import { LoginModule } from './login/login.module';
     FormsModule,
     HttpModule,
     TranslateModule.forRoot(),
-<% if (props.ui === 'bootstrap') { -%>
+<% if (props.ui === 'material') { -%>
+    BrowserAnimationsModule,
+    MaterialModule,
+<% } else if (props.ui === 'bootstrap') { -%>
     NgbModule.forRoot(),
 <% } else if (props.ui === 'ionic') { -%>
     IonicModule.forRoot(AppComponent, {locationStrategy: 'path'}),

generators/app/templates/src/app/about/__material.about.component.html

@@ -0,0 +1,8 @@
+<div class="app-content text-center">
+	<h1>
+		<span translate>APP_NAME</span>
+    </h1>
+    <p>
+		<i class="fa fa-bookmark-o"></i> <span translate>Version</span> {{version}}
+    </p>
+</div>

generators/app/templates/src/app/core/_core.module.ts

@@ -5,12 +5,14 @@ import { HttpModule, Http, XHRBackend, ConnectionBackend, RequestOptions } from
 import { TranslateModule } from '@ngx-translate/core';
 <% if (props.ui === 'bootstrap') { -%>
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+<% } else if (props.ui === 'material') { -%>
+import { MaterialModule } from './../material.module';
 <% } else if (props.ui === 'ionic') { -%>
 import { IonicModule } from 'ionic-angular';
 <% } -%>
 
 import { ShellComponent } from './shell/shell.component';
-<% if (props.ui === 'bootstrap') { -%>
+<% if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
 import { HeaderComponent } from './shell/header/header.component';
 <% } -%>
 <% if (props.auth) { -%>
@@ -34,6 +36,8 @@ export function createHttpService(backend: ConnectionBackend,
     TranslateModule,
 <% if (props.ui === 'bootstrap') { -%>
     NgbModule,
+<% } else if (props.ui === 'material') { -%>
+    MaterialModule,
 <% } else if (props.ui === 'ionic') { -%>
     IonicModule,
 <% } -%>
@@ -45,7 +49,7 @@ export function createHttpService(backend: ConnectionBackend,
   ],
 <% } -%>
   declarations: [
-<% if (props.ui === 'bootstrap') { -%>
+<% if (props.ui === 'bootstrap' || props.ui === 'material') { -%>
     HeaderComponent,
 <% } -%>
     ShellComponent

generators/app/templates/src/app/core/shell/__material.shell.component.html

@@ -0,0 +1,2 @@
+<app-header></app-header>
+<router-outlet></router-outlet>

generators/app/templates/src/app/core/shell/__material.shell.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-shell',
+  templateUrl: './shell.component.html',
+  styleUrls: ['./shell.component.scss']
+})
+export class ShellComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

generators/app/templates/src/app/core/shell/header/__material._header.component.html

@@ -0,0 +1,31 @@
+<mat-toolbar class="mat-elevation-z6 navbar" color="primary">
+  <span><a class="toolbar-brand" href="https://github.com/ngx-rocket" translate>APP_NAME</a></span>
+  <span class="example-spacer"></span>
+  <button mat-button routerLink="/home" routerLinkActive="active">
+    <i class="fa fa-home"></i>
+    <span translate>Home</span>
+  </button>
+  <button mat-button routerLink="/about" routerLinkActive="active">
+    <i class="fa fa-question-circle"></i>
+    <span translate>About</span>
+  </button>
+  <button mat-button [matMenuTriggerFor]="langMenu">
+      {{currentLanguage}}
+    </button>
+  <mat-menu #langMenu="matMenu">
+    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">
+        {{language}}
+      </button>
+  </mat-menu>
+<% if (props.auth) { -%>
+  <button mat-icon-button [matMenuTriggerFor]="userMenu">
+    <i class="fa fa-user-circle"></i>
+  </button>
+  <mat-menu #userMenu="matMenu">
+    <mat-list>
+      <mat-list-item><span translate>Logged in as</span>&nbsp;<b>{{username}}</b></mat-list-item>
+    </mat-list>
+    <button mat-menu-item (click)="logout()" translate>Logout</button>
+  </mat-menu>
+<% } -%>
+</mat-toolbar>

generators/app/templates/src/app/core/shell/header/__material._header.component.spec.ts

@@ -0,0 +1,44 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from './../../../material.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+
+<% if (props.auth) { -%>
+import { AuthenticationService } from '../../authentication/authentication.service';
+import { MockAuthenticationService } from '../../authentication/authentication.service.mock';
+<% } -%>
+import { I18nService } from '../../i18n.service';
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        MaterialModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [HeaderComponent],
+      providers: [
+<% if (props.auth) { -%>
+        { provide: AuthenticationService, useClass: MockAuthenticationService },
+<% } -%>
+        I18nService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

generators/app/templates/src/app/core/shell/header/__material._header.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+<% if (props.auth) { -%>
+import { Router } from '@angular/router';
+
+import { AuthenticationService } from '../../authentication/authentication.service';
+<% } else { -%>
+
+<% } -%>
+import { I18nService } from '../../i18n.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  menuHidden = true;
+  langMenu: Object;
+  userMenu: Object;
+
+<% if (props.auth) { -%>
+  constructor(private router: Router,
+              private authenticationService: AuthenticationService,
+              private i18nService: I18nService) { }
+<% } else { -%>
+  constructor(private i18nService: I18nService) { }
+<% } -%>
+
+  ngOnInit() { }
+
+  toggleMenu() {
+    this.menuHidden = !this.menuHidden;
+  }
+
+  setLanguage(language: string) {
+    this.i18nService.language = language;
+  }
+
+<% if (props.auth) { -%>
+  logout() {
+    this.authenticationService.logout()
+      .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+  }
+
+<% } -%>
+  get currentLanguage(): string {
+    return this.i18nService.language;
+  }
+
+  get languages(): string[] {
+    return this.i18nService.supportedLanguages;
+  }
+
+<% if (props.auth) { -%>
+  get username(): string {
+    const credentials = this.authenticationService.credentials;
+    return credentials ? credentials.username : null;
+  }
+
+<% } -%>
+}

generators/app/templates/src/app/core/shell/header/__material.header.component.scss

@@ -0,0 +1,14 @@
+@import "src/theme/theme-variables";
+
+.navbar {
+  position: sticky;
+}
+
+.toolbar-brand {
+  color: #fff;
+  text-decoration: none;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}

generators/app/templates/src/app/home/__material.home.component.html

@@ -0,0 +1,8 @@
+<div class="app-content text-center">
+  <h1>
+    <img class="logo" src="assets/ngx-rocket-logo.png" alt="angular logo" />
+    <span translate>Hello world !</span>
+  </h1>
+  <app-loader [isLoading]="isLoading"></app-loader>
+  <q [hidden]="isLoading" class="text-center">{{quote}}</q>
+</div>

generators/app/templates/src/app/home/_home.component.spec.ts

@@ -1,7 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Http, BaseRequestOptions } from '@angular/http';
 import { MockBackend } from '@angular/http/testing';
-<% if (props.ui === 'ionic') { -%>
+<% if (props.ui === 'material') { -%>
+import { MaterialModule } from './../material.module';
+<% } else if (props.ui === 'ionic') { -%>
 import { IonicModule } from 'ionic-angular';
 <% } -%>
 
@@ -16,7 +18,9 @@ describe('HomeComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
         imports: [
-<% if (props.ui === 'ionic') { -%>
+<% if (props.ui === 'material') { -%>
+          MaterialModule,
+<% } else if (props.ui === 'ionic') { -%>
           IonicModule.forRoot(HomeComponent),
 <% } -%>
           SharedModule

generators/app/templates/src/app/home/_home.module.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-<% if (props.ui === 'ionic') { -%>
+<% if (props.ui === 'material') { -%>
+import { MaterialModule } from './../material.module';
+<% } else if (props.ui === 'ionic') { -%>
 import { IonicModule } from 'ionic-angular';
 <% } -%>
 
@@ -17,7 +19,9 @@ import { QuoteService } from './quote.service';
     TranslateModule,
     CoreModule,
     SharedModule,
-<% if (props.ui === 'ionic') { -%>
+<% if (props.ui === 'material') { -%>
+    MaterialModule,
+<% } else if (props.ui === 'ionic') { -%>
     IonicModule,
 <% } -%>
     HomeRoutingModule