Material stepper added and updated docs

Author: jeroenouw

README.md

@@ -9,7 +9,7 @@
 ![logo](https://jerouw.nl/wp-content/uploads/2017/05/ngfbmd.png "Logo")  
 
 # Angular 4 | Material Design | Firebase - Starter kit
-A full stack starter app containing [Angular 4](https://angular.io) (v4.4.3), [Material](https://material.io/) (v2.0.0-beta.8) and [Firebase](https://firebase.google.com/) (v4.4.0).
+A full stack starter app containing [Angular 4](https://angular.io) (v4.4.5), [Material](https://material.io/) (v2.0.0-beta.12) and [Firebase](https://firebase.google.com/) (v4.5.1).
 
 ## [Live demo](http://angular4.jerouw.nl) 
 ![loginpage](https://jerouw.nl/wp-content/uploads/2017/05/ngfbmdprintscreen.png "Logo")  

docs/FEATURES.md

@@ -24,18 +24,19 @@
 * Loading spinner and progress bar
 
 ## Material Design usage in this project:
-* MD Datepicker
-* MD Input
-* MD Slide toggle
-* MD Menu
-* MD Sidenav
-* MD Toolbar
-* MD Table
-* MD Card
-* MD Tabs
-* MD Buttons
-* MD Icon
-* MD Progress spinner
-* MD Progress bar
-* MD Tooltip
-* MD Snackbar
+* Mat Datepicker
+* Mat Input
+* Mat Slide toggle
+* Mat Menu
+* Mat Sidenav
+* Mat Toolbar
+* Mat Table
+* Mat Stepper
+* Mat Card
+* Mat Tabs
+* Mat Buttons
+* Mat Icon
+* Mat Progress spinner
+* Mat Progress bar
+* Mat Tooltip
+* Mat Snackbar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxmatfire",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Jeroen Ouwehand",
   "description": "Full stack starter app with Angular 4, Material Design and Firebase.",
   "keywords": [

src/app/components/misc/misc.component.html

@@ -53,7 +53,9 @@ <h3>mat Slide toggle : </h3>
       Click me!
     </mat-slide-toggle>
 
-    <br/><hr>
+    <br/><hr><br/>
+
+    <app-stepper></app-stepper>
 
     <!-- Temporary disabled -->
     <!-- <app-table></app-table> -->

src/app/components/misc/misc.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule, MatSlideToggleModule,
-         MatTooltipModule, MatSidenavModule, MatTableModule, MatCardModule, MatDatepickerModule } from '@angular/material';
+import { MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule, 
+         MatSlideToggleModule, MatStepperModule, MatTooltipModule, MatSidenavModule, 
+         MatTableModule, MatCardModule, MatDatepickerModule } from '@angular/material';
 
 // import { CdkTableModule } from '@angular/cdk';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -16,6 +17,7 @@ import { ChangeDetectionComponent } from './change/change-detection.component';
 import { ChangeDetailComponent } from './change/change-detail.component';
 import { VirtRealComponent } from './virtual-reality/virtreal.component';
 import { TableComponent } from './table/table.component';
+import { StepperComponent } from './stepper/stepper.component';
 
 @NgModule({
   declarations: [
@@ -24,12 +26,14 @@ import { TableComponent } from './table/table.component';
     ChangeDetectionComponent,
     ChangeDetailComponent,
     VirtRealComponent,
-    TableComponent
+    TableComponent,
+    StepperComponent
   ],
   imports: [
     CommonModule,
-    MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule, MatSlideToggleModule,
-    MatTooltipModule, MatSidenavModule, MatTableModule, MatCardModule, MatDatepickerModule,
+    MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule, 
+    MatSlideToggleModule, MatStepperModule, MatTooltipModule, MatSidenavModule, 
+    MatTableModule, MatCardModule, MatDatepickerModule,
     FormsModule, ReactiveFormsModule,
     PipesModule,
     // MiscRoutingModule
@@ -40,7 +44,8 @@ import { TableComponent } from './table/table.component';
     ChangeDetectionComponent,
     ChangeDetailComponent,
     VirtRealComponent,
-    TableComponent
+    TableComponent,
+    StepperComponent
   ]
 })
 

src/app/components/misc/stepper/stepper.component.html

@@ -0,0 +1,34 @@
+<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>
+
+<mat-horizontal-stepper [linear]="isLinear">
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="First name and last name" formControlName="name" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your email</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Email" formControlName="email" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext [disabled]="secondFormGroup.invalid">Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+    </div>
+  </mat-step>
+</mat-horizontal-stepper>

src/app/components/misc/stepper/stepper.component.scss

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { EmailValidator } from '../../shared';
+
+@Component({
+  selector: 'app-stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss']
+})
+export class StepperComponent implements OnInit {
+  isLinear = false;
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      name: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      email: ['', Validators.compose([Validators.required, EmailValidator.isValid])]
+    });
+  }
+}