feat: view clients layout added (#76)

* Fetch all clients from mifos api

package-lock.json

@@ -4475,18 +4475,6 @@
         }
       }
     },
-    "extract-zip": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
-      "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
-      "dev": true,
-      "requires": {
-        "concat-stream": "1.6.2",
-        "debug": "2.6.9",
-        "mkdirp": "0.5.1",
-        "yauzl": "2.4.1"
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -4540,15 +4528,6 @@
         "websocket-driver": "0.7.0"
       }
     },
-    "fd-slicer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
-      "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
-      "dev": true,
-      "requires": {
-        "pend": "1.2.0"
-      }
-    },
     "file-entry-cache": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
@@ -9228,12 +9207,6 @@
         "sha.js": "2.4.11"
       }
     },
-    "pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -9604,12 +9577,6 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
       "dev": true
     },
-    "progress": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.0.tgz",
-      "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
-      "dev": true
-    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -9809,7 +9776,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
       "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "prr": {
       "version": "1.0.1",
@@ -10002,48 +9970,6 @@
       "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
       "dev": true
     },
-    "puppeteer": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.5.0.tgz",
-      "integrity": "sha512-eELwFtFxL+uhmg4jPZOZXzSrPEYy4CaYQNbcchBbfxY+KjMpnv6XGf/aYWaQG49OTpfi2/DMziXtDM8XuJgoUA==",
-      "dev": true,
-      "requires": {
-        "debug": "3.1.0",
-        "extract-zip": "1.6.7",
-        "https-proxy-agent": "2.2.1",
-        "mime": "2.3.1",
-        "progress": "2.0.0",
-        "proxy-from-env": "1.0.0",
-        "rimraf": "2.6.2",
-        "ws": "5.2.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "mime": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz",
-          "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==",
-          "dev": true
-        },
-        "ws": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz",
-          "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "1.0.0"
-          }
-        }
-      }
-    },
     "q": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
@@ -13805,15 +13731,6 @@
         }
       }
     },
-    "yauzl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
-      "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
-      "dev": true,
-      "requires": {
-        "fd-slicer": "1.0.1"
-      }
-    },
     "yeast": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",

package.json

@@ -71,7 +71,6 @@
     "karma-jasmine": "^1.1.2",
     "karma-junit-reporter": "^1.2.0",
     "protractor": "~5.3.0",
-    "puppeteer": "^1.5.0",
     "stylelint": "~9.2.0",
     "stylelint-config-recommended-scss": "~3.2.0",
     "stylelint-config-standard": "~18.2.0",

src/app/clients/clients.component.html

@@ -1,46 +1,81 @@
 <div class="container m-t-40">
 
-<mat-form-field class="filter">
+  <mat-form-field class="filter">
     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
   </mat-form-field>
-  
+
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
-  
-      <!-- ID Column -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
-        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
-      </ng-container>
-  
-      <!-- Progress Column -->
-      <ng-container matColumnDef="progress">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
-        <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
-      </ng-container>
-  
+
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+        <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
       </ng-container>
-  
+
+      <!-- Account no Column -->
+      <ng-container matColumnDef="clientno">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
+        <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
+      </ng-container>
+
+      <!-- External ID Column -->
+      <ng-container matColumnDef="externalid">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> ExternalID </th>
+        <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
+      </ng-container>
+
+
+
+      <!-- Status Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <td mat-cell *matCellDef="let row"> {{row.active}} </td>
+      </ng-container>
+
       <!-- Color Column -->
-      <ng-container matColumnDef="color">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
-        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
+      <ng-container matColumnDef="office">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> OfficeName </th>
+        <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
       </ng-container>
-  
+
+
+      <!-- ID Column -->
+      <ng-container matColumnDef="staff">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> StaffName </th>
+        <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;">
       </tr>
     </table>
-  
+
     <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
   </div>
-  
-  
+
+
   <!-- Copyright 2018 Google Inc. All Rights Reserved.
       Use of this source code is governed by an MIT-style license that
       can be found in the LICENSE file at http://angular.io/license -->
-</div>
+</div>
+
+
+
+<!-- <div class="container">
+  <div class="row">
+    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
+      <input type="text" #serverName>
+      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">Add Server</button>
+      <br><br>
+      <button class="btn btn-primary" (click)="onSave()">Save</button>
+      <button class="btn btn-primary" (click)="onGet()">Get</button>
+      <hr>
+      <ul class="list-group" *ngFor="let server of post">
+        <li class="list-group-item">{{ server.firstname }} (ID: {{ server.id }})</li>
+      </ul>
+    </div>
+  </div>
+</div>
+ -->
+

src/app/clients/clients.component.scss

@@ -9,9 +9,9 @@
 }
 
 td, th {
-  width: 25%;
+  width: 15%;
 }
 
 .filter{
   width: 50%;
-}
+}

src/app/clients/clients.component.ts

@@ -1,26 +1,33 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
-
+import { Response} from '@angular/http';
+import {ClientsService} from './clients.service';
+import {DataSource} from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
 @Component({
   selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
   styleUrls: ['./clients.component.scss']
 })
 export class ClientsComponent implements OnInit {
-
-  displayedColumns = ['id', 'name', 'progress', 'color'];
-  dataSource: MatTableDataSource<UserData>;
+  post: any = [];
+  private ELEMENT_DATA: any = null;
+  displayedColumns =  ['name', 'clientno', 'externalid', 'status', 'office', 'staff'];
+  dataSource = new MatTableDataSource();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor() {
-    // Create 100 users
-    const users: UserData[] = [];
-    for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); }
-
-    // Assign the data to the data source for the table to render
-    this.dataSource = new MatTableDataSource(users);
+  constructor(private clientService: ClientsService) {
+      // GET from clients API
+      this.clientService.getServer()
+      .subscribe(
+        (res => {
+        console.log(res);
+        this.ELEMENT_DATA = res;
+        this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
+        })
+      );
   }
 
   ngOnInit() {
@@ -38,32 +45,3 @@ export class ClientsComponent implements OnInit {
   }
 
 }
-/** Constants used to fill up our data base. */
-const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
-/** Builds and returns a new User. */
-function createNewUser(id: number): UserData {
-  const name =
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
-
-  return {
-    id: id.toString(),
-    name: name,
-    progress: Math.round(Math.random() * 100).toString(),
-    color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
-  };
-}
-
-
-
-export interface UserData {
-  id: string;
-  name: string;
-  progress: string;
-  color: string;
-}
-

src/app/clients/clients.module.ts

@@ -1,10 +1,12 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {Component, OnInit, ViewChild} from '@angular/core';
-
-import { ArchwizardModule } from 'angular-archwizard';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CoreModule } from '../core/core.module';
-import {MatTableModule} from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ClientsRoutingModule } from './clients-routing.module';
 import { ClientsComponent } from './clients.component';
@@ -12,12 +14,19 @@ import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
 
+import { ClientsService } from './clients.service';
+
 @NgModule({
   imports: [
     CoreModule,
     CommonModule,
     ClientsRoutingModule,
-    ArchwizardModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    BrowserModule,  // tslint:disable
+    HttpModule, 
+    MatTableModule
   ],
   declarations: [
     ClientsComponent,
@@ -25,6 +34,10 @@ import { ViewLoanComponent } from './view-loan/view-loan.component';
     ViewClientComponent,
     ViewLoanComponent
   ],
+  providers: [
+    ClientsService,
+    HttpModule  // tslint:disable
+  ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ]

src/app/clients/clients.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, Response } from '@angular/http';
+/* import { HttpHeaders, HttpClient } from '@angular/common/http';
+ */
+import { Observable } from 'rxjs';
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+export class ClientsService {
+    constructor(private http: Http) {} // tslint:disable-line
+   getServer() {
+    const username = 'mifos';
+    const password = 'password';
+    const headers = new Headers();   // tslint:disable-line
+    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
+    headers.append('Content-Type', 'application/json');
+    headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    headers.append('Access-Control-Allow-Origin', '*');
+    return this.http.get
+    ('https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true',
+    {headers: headers})
+    .pipe(
+    map(
+        (response: Response) => {  // tslint:disable-line
+          response = response.json();
+          return response['pageItems'];
+
+        }
+    )
+  );
+}
+}

src/app/clients/create-client/create-client.component.html

@@ -172,3 +172,237 @@
   </aw-wizard-step>
 </aw-wizard>
 </div> -->
+<!-- <div class="container">
+
+ <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
+  <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
+
+          <div class="col-sm-6 mx-auto">
+              <div class="card mt-5">
+    <div class="card-body">
+      <div class="form-group">
+          <fieldset disabled="">
+            <label class="control-label" for="disabledInput">Disabled input</label>
+            <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
+          </fieldset>
+        </div>
+
+        <div class="form-group">
+          <fieldset>
+            <label class="control-label" for="readOnlyInput">Readonly input</label>
+            <input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
+          </fieldset>
+        </div>
+
+        <div class="form-group has-success">
+          <label class="form-control-label" for="inputSuccess1">Valid input</label>
+          <input value="correct value" class="form-control is-valid" id="inputValid" type="text">
+          <div class="valid-feedback">Success! You've done it.</div>
+        </div>
+
+        <div class="form-group has-danger">
+          <label class="form-control-label" for="inputDanger1">Invalid input</label>
+          <input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
+          <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
+        </div>
+
+        <div class="form-group">
+          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
+          <input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
+        </div>
+
+        <div class="form-group">
+          <label class="col-form-label" for="inputDefault">Default input</label>
+          <input class="form-control" placeholder="Default input" id="inputDefault" type="text">
+        </div>
+
+        <div class="form-group">
+          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
+          <input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
+        </div>
+
+        <div class="form-group">
+          <label class="control-label">Input addons</label>
+          <div class="form-group">
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text">$</span>
+              </div>
+              <input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
+              <div class="input-group-append">
+                <span class="input-group-text">.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary float-right" awNextStep>Next Step</button>
+        </div>
+      </div>
+    </div>
+
+
+  </aw-wizard-step>
+  <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
+      <div class="col-sm-6 mx-auto">
+          <div class="card mt-5">
+        <div class="card-body">
+              <form>
+                <fieldset>
+
+                  <div class="form-group row">
+                    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
+                    <div class="col-sm-10">
+                      <input readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com" type="text">
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleInputEmail1">Email address</label>
+                    <input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" type="email">
+                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleInputPassword1">Password</label>
+                    <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleSelect1">Example select</label>
+                    <select class="form-control" id="exampleSelect1">
+                      <option>1</option>
+                      <option>2</option>
+                      <option>3</option>
+                      <option>4</option>
+                      <option>5</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleSelect2">Example multiple select</label>
+                    <select multiple="" class="form-control" id="exampleSelect2">
+                      <option>1</option>
+                      <option>2</option>
+                      <option>3</option>
+                      <option>4</option>
+                      <option>5</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleTextarea">Example textarea</label>
+                    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label for="exampleInputFile">File input</label>
+                    <input class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" type="file">
+                    <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+                  </div>
+                  <fieldset class="form-group">
+                    <legend>Radio buttons</legend>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">
+                        Option one is this and that—be sure to include why it's great
+                      </label>
+                    </div>
+                    <div class="form-check">
+                    <label class="form-check-label">
+                        <input class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" type="radio">
+                        Option two can be something else and selecting it will deselect option one
+                      </label>
+                    </div>
+                    <div class="form-check disabled">
+                    <label class="form-check-label">
+                        <input class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" type="radio">
+                        Option three is disabled
+                      </label>
+                    </div>
+                  </fieldset>
+                  <fieldset class="form-group">
+                    <legend>Checkboxes</legend>
+                    <div class="form-check">
+                      <label class="form-check-label">
+                        <input class="form-check-input" value="" checked="" type="checkbox">
+                        Option one is this and that—be sure to include why it's great
+                      </label>
+                    </div>
+                    <div class="form-check disabled">
+                      <label class="form-check-label">
+                        <input class="form-check-input" value="" disabled="" type="checkbox">
+                        Option two is disabled
+                      </label>
+                    </div>
+                  </fieldset>
+                </fieldset>
+              </form>
+
+              <button type="button" class="btn btn-primary float-left" awPreviousStep>Go to previous step</button>
+              <button type="button" class="btn btn-primary float-right" awNextStep>Go to next step</button>
+              </div>
+            </div>
+          </div>
+
+  </aw-wizard-step>
+  <aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }">
+    Content of Step 3
+    <button type="button" class="btn btn-primary"  awPreviousStep>Previous Step</button>
+    <button type="button" class="btn btn-primary" >Finish</button>
+  </aw-wizard-step>
+</aw-wizard>
+</div> -->
+<div class="container m-t-40">
+
+  <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+      {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+    </button>
+    <mat-horizontal-stepper [linear]="isLinear" #stepper>
+      <mat-step [stepControl]="firstFormGroup">
+        <form [formGroup]="firstFormGroup" fxLayout="column">
+          <ng-template matStepLabel>Fill out your name</ng-template>
+          <mat-form-field>
+            <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+          </mat-form-field>
+        <div>
+          <mat-form-field>
+              <input matInput placeholder="Input">
+            </mat-form-field>
+          </div>
+          
+            <mat-form-field>
+              <textarea matInput placeholder="Textarea"></textarea>
+            </mat-form-field>
+          
+            <mat-form-field>
+              <mat-select placeholder="Select">
+                <mat-option value="option">Option</mat-option>
+              </mat-select>
+            </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 address</ng-template>
+          <mat-form-field>
+            <input matInput placeholder="Address" formControlName="secondCtrl" required>
+          </mat-form-field>
+          <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button matStepperNext>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>
+          <button mat-button (click)="stepper.reset()">Reset</button>
+        </div>
+      </mat-step>
+    </mat-horizontal-stepper>
+  </div>
+  <div fxLayout="row">
+    <div>1. One</div>
+    <div>2. Two</div>
+    <div>3. Three</div>
+    <div>4. Four</div>
+  </div>

src/app/clients/create-client/create-client.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit} from '@angular/core';
-
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 @Component({
   selector: 'mifosx-create-client',
   templateUrl: './create-client.component.html',
@@ -7,9 +7,19 @@ import { Component, OnInit} from '@angular/core';
 })
 export class CreateClientComponent implements OnInit {
 
-  constructor() { }
+  isLinear = false;
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required]
+    });
   }
 
 }