Update UI for example projects

src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    SharedModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dependency-injection/base/base.component.ts

@@ -1,22 +1,27 @@
 import { Component } from '@angular/core';
+import { NavItem } from 'src/app/shared/nav-item';
 
 @Component({
   selector: 'app-di-root',
   template: `
-  <div class="pa2">
-    <div class="ba br4 p2 pl3 mb3 bg-purple white">
-      <h1>{{title}}</h1>
+  <app-header [navItems]="navModel"></app-header>
+    <div class="pt6 ph3">
+      <div class="center">
+        <app-form-new-user></app-form-new-user>
+      </div>
+      <div class="pt3">
+        <app-user-info></app-user-info>
+      </div>
     </div>
-    <div class="center">
-      <app-form-new-user></app-form-new-user>
-    </div>
-    <div class="pt3">
-      <app-user-info></app-user-info>
-    </div>
-  </div>
   `,
   styleUrls: ['./base.component.css']
 })
 export class BaseComponent {
-  title = 'Augury Dependency Injection Demo';
+  navModel: NavItem[] = [
+    {
+      title: 'Augury Dependency Injection Demo',
+      defaultStyle: true,
+      headerOnly: true
+    }
+  ];
 }

src/app/dependency-injection/dependency-injection.module.ts

@@ -7,6 +7,7 @@ import { BaseComponent } from './base/base.component';
 import { FormNewUserComponent } from './form-new-user/form-new-user.component';
 import { NewUserService } from './new-user.service';
 import { UserInfoComponent } from './user-info/user-info.component';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -16,8 +17,9 @@ import { UserInfoComponent } from './user-info/user-info.component';
   ],
   imports: [
     CommonModule,
+    DependencyInjectionRoutingModule,
     FormsModule,
-    DependencyInjectionRoutingModule
+    SharedModule
   ],
   providers: [NewUserService]
 })

src/app/dependency-injection/form-new-user/form-new-user.component.html

@@ -0,0 +1,28 @@
+<form #formRef="ngForm">
+  <div class="dt dt--fixed w-100 pt2">
+    <div class="dt dt--fixed">
+      <label for="name" class="fl w-20 tr pt1 pr4 mb2 f4">Name</label>
+      <input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="name" name="name" ngModel required />
+    </div>
+    <div class="dt dt--fixed">
+      <label for="surname" class="fl w-20 tr pt1 pr4 mb2 f4">Surname</label>
+      <input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="surname" name="surname" ngModel required />
+    </div>
+    <div class="dt dt--fixed">
+      <label for="email" class="fl w-20 tr pt1 pr4 mb2 f4">Email</label>
+      <input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="email" name="email" ngModel required />
+    </div>
+    <div class="dt dt--fixed">
+      <label for="password" class="fl w-20 tr pt1 pr4 mb2 f4">Password</label>
+      <input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="password" id="password" name="password" ngModel required />
+      <label for="surname" class="fl w-20 tr pr2 mb2">&nbsp;</label>
+    </div>
+    <div class="dt dt--fixed">
+      <div class="fl ml6 mt2">
+        <button (click)="onSubmit(formRef.value); formRef.reset();"
+       [disabled]="!formRef.valid"
+       class="link br2 bw3 btn-bg tr black fl ml6">Create</button>
+      </div>
+    </div>
+  </div>
+</form>

src/app/dependency-injection/form-new-user/form-new-user.component.ts

@@ -3,34 +3,12 @@ import { NewUserService } from '../new-user.service';
 
 @Component({
   selector: 'app-form-new-user',
-  template: `
-    <form #formRef="ngForm">
-      <div class="dt dt--fixed w-100 ba pt2">
-
-        <div class="dt dt--fixed">
-          <label for="name" class="fl w-20 tr pr2 mb2 ">Name:</label>
-          <input type="text" id="name" name="name" ngModel required class="fl w-25 mb2" />
-          <label for="surname" class="fl w-20 tr pr2 mb2">Surname:</label>
-          <input type="text" id="surname" name="surname" ngModel required class="fl w-25 mb2" />
-        </div>
-
-        <div class="dt dt--fixed">
-          <label for="email" class="fl w-20 tr pr2 mb2">Email:</label>
-          <input type="text" id="email" name="email" ngModel required class="fl w-25 mb2" />
-        </div>
-
-        <div class="dt dt--fixed">
-          <label for="password" class="fl w-20 tr pr2 mb2">Password:</label>
-          <input type="password" id="password" name="password" ngModel required class="fl w-25 mb2"/>
-          <label for="surname" class="fl w-20 tr pr2 mb2">&nbsp;</label>
-          <button (click)="onSubmit(formRef.value); formRef.reset();" [disabled]="!formRef.valid" class="link br2 ba bw1 bg-black yellow b--black fl w-25">Create</button>
-        </div>
-
-      </div>
-
-    </form>
-  `,
-  styles: []
+  templateUrl: './form-new-user.component.html',
+  styles: [`
+  button[disabled] {
+    color: gray;
+  }
+  `]
 })
 export class FormNewUserComponent {
 

src/app/dependency-injection/user-info/user-info.component.html

@@ -0,0 +1,22 @@
+<div class="pt4 pl6" *ngIf="userInfo">
+  <div class="overflow-auto">
+    <table class="f6 w-100 mw8" cellspacing="0">
+      <thead>
+        <tr class="stripe-purple">
+          <th class="fw6 tl pa3 bg-white">Name</th>
+          <th class="fw6 tl pa3 bg-white">Surname</th>
+          <th class="fw6 tl pa3 bg-white">Email</th>
+          <th class="fw6 tl pa3 bg-white">Password</th>
+        </tr>
+      </thead>
+      <tbody class="lh-copy">
+        <tr class="stripe-purple">
+          <td class="pa3">{{userInfo.name}}</td>
+          <td class="pa3">{{userInfo.surname}}</td>
+          <td class="pa3">{{userInfo.email}}</td>
+          <td class="pa3">{{userInfo.password}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/dependency-injection/user-info/user-info.component.ts

@@ -3,31 +3,12 @@ import { NewUserService } from '../new-user.service';
 
 @Component({
   selector: 'app-user-info',
-  template: `
-    <div *ngIf="userInfo">
-      <div class="overflow-auto">
-        <table class="f6 w-100 mw8 ba" cellspacing="0">
-          <thead>
-            <tr class="stripe-dark">
-              <th class="fw6 tl pa2 ba bg-white">Name</th>
-              <th class="fw6 tl pa2 ba bg-white">Surname</th>
-              <th class="fw6 tl pa2 ba bg-white">Email</th>
-              <th class="fw6 tl pa2 ba bg-white">Password</th>
-            </tr>
-          </thead>
-          <tbody class="lh-copy">
-            <tr class="stripe-dark">
-              <td class="pa2 ba">{{userInfo.name}}</td>
-              <td class="pa2 ba">{{userInfo.surname}}</td>
-              <td class="pa2 ba">{{userInfo.email}}</td>
-              <td class="pa2 ba">{{userInfo.password}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  `,
-  styles: []
+  templateUrl: './user-info.component.html',
+  styles: [`
+  .stripe-purple:nth-child(odd) {
+    background-color: rgba(241, 224, 255, 0.7);
+  }
+  `]
 })
 export class UserInfoComponent {
 

src/app/forms-demo/base/base.component.html

@@ -1,8 +1,7 @@
-<div class="ba br4 p2 pl3 bg-purple white">
-  <h1>{{title}}</h1>
-</div>
-<login-form></login-form>
+<app-header [navItems]="navModel"></app-header>
 
-<login-model-form></login-model-form>
+<app-login-form></app-login-form>
 
-<model-form></model-form>
+<app-login-model-form></app-login-model-form>
+
+<app-model-form></app-model-form>

src/app/forms-demo/base/base.component.ts

@@ -1,10 +1,17 @@
 import { Component } from '@angular/core';
+import { NavItem } from 'src/app/shared/nav-item';
 
 @Component({
   selector: 'app-forms-root',
   templateUrl: './base.component.html',
   styleUrls: ['./base.component.css']
 })
 export class BaseComponent {
-  title = 'Augury Forms Demo';
+  navModel: NavItem[] = [
+    {
+      title: 'Augury Forms Demo',
+      defaultStyle: true,
+      headerOnly: true
+    }
+  ];
 }

src/app/forms-demo/forms-demo.module.ts

@@ -7,6 +7,7 @@ import { LoginFormComponent } from './login-form/login-form.component';
 import { ModelFormComponent } from './model-form/model-form.component';
 import { LoginModelFormComponent } from './login-model-form/login-model-form.component';
 import { FormsDemoRoutingModule } from './forms-demo-routing.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { FormsDemoRoutingModule } from './forms-demo-routing.module';
   ],
   imports: [
     CommonModule,
+    SharedModule,
     FormsModule,
     ReactiveFormsModule,
     FormsDemoRoutingModule

src/app/forms-demo/login-form/login-form.component.html

@@ -1,32 +1,32 @@
-<div class="container ph4 pb4 black-80 br3 ma3 center w-70">
-  <p class="f3">Login (Template based)</p>
-  <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value); formRef.reset()" class="measure center">
+<div class="container ph4 pb4 black-80 br3 mt6 ma3 center w-70">
+  <p class="f3 b">Login: Template based</p>
+  <form class="measure center" #formRef="ngForm" (ngSubmit)="onSubmit(formRef); formRef.reset()">
     <div class="mt3">
-      <label for="userid" class="db fw6 lh-copy f5">Username</label>
+      <label for="userid" class="db lh-copy f5">Username</label>
       <input type="text"
              name="userid"
              ngModel
              required
-             class="pa1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+             class="pa1 ba b--black-20 br3 input-reset hover-bg-washed-blue hover-dark-blue w-100">
     </div>
 
     <div class="mt3">
-      <label for="password" class="db fw6 lh-copy f5">Password</label>
+      <label for="password" class="db lh-copy f5">Password</label>
       <input type="password"
              name="password"
              ngModel
              required
              minlength="5"
-             class="pa1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+             class="pa1 ba b--black-20 br3 input-reset hover-bg-washed-blue hover-dark-blue w-100">
     </div>
 
     <div class="mt3">
       <label for="remember" >
-        <input type="checkbox" name="remember" ngModel class="fw6 lh-copy f5">
+        <input type="checkbox" name="remember" ngModel class="lh-copy f5">
         Remember
       </label>
     </div>
 
-    <button class="link br2 ba bw1 bg-black yellow b--black fl mt3" type="submit" [disabled]="!formRef.valid">Login</button>
+    <button class="link br2 bw3 btn-bg white fl mt3" type="submit" [disabled]="!formRef.valid">Login</button>
   </form>
 </div>

src/app/forms-demo/login-form/login-form.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
 
 @Component({
-  selector: 'login-form',
+  selector: 'app-login-form',
   templateUrl: './login-form.component.html',
   styleUrls: ['./login-form.component.css']
 })
@@ -12,8 +13,8 @@ export class LoginFormComponent implements OnInit {
   ngOnInit() {
   }
 
-  onSubmit(value) {
-    console.log(JSON.stringify(value));
+  onSubmit(form: NgForm) {
+    console.log(form.value);
   }
 
 }

src/app/forms-demo/login-model-form/login-model-form.component.html

@@ -1,23 +1,23 @@
 <div class="container ph4 pb4 black-80 br3 ma3 center w-70">
-  <p class="f3">Login (Template based)</p>
-  <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value); formRef.reset()" class="measure center">
+  <p class="f3 b">Login: Template based</p>
+  <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef); formRef.reset()" class="measure center">
     <div class="mt3">
-      <label for="userid" class="db fw6 lh-copy f5">Username</label>
+      <label for="userid" class="db lh-copy f5">Username</label>
       <input type="text"
              name="userid"
              [(ngModel)]="username"
              required
-             class="pa1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+             class="pa1 ba b--black-20 br3 input-reset hover-bg-washed-blue hover-dark-blue w-100">
     </div>
 
     <div class="mt3">
-      <label for="password" class="db fw6 lh-copy f5">Password</label>
+      <label for="password" class="db lh-copy f5">Password</label>
       <input type="password"
              name="password"
              [(ngModel)]="password"
              required
              minlength="5"
-             class="pa1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+             class="pa1 ba b--black-20 br3 input-reset hover-bg-washed-blue hover-dark-blue w-100">
     </div>
 
     <div class="mt3">
@@ -27,6 +27,6 @@
       </label>
     </div>
 
-    <button class="link br2 ba bw1 bg-black yellow b--black fl mt3" type="submit" [disabled]="!formRef.valid">Login</button>
+    <button class="link br2 ba bw3 btn-bg white fl mt3" type="submit" [disabled]="!formRef.valid">Login</button>
   </form>
 </div>

src/app/forms-demo/login-model-form/login-model-form.component.ts

@@ -1,23 +1,24 @@
 import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
 
 @Component({
-  selector: 'login-model-form',
+  selector: 'app-login-model-form',
   templateUrl: './login-model-form.component.html',
   styleUrls: ['./login-model-form.component.css']
 })
 export class LoginModelFormComponent implements OnInit {
 
-  username = "Shivaji";
-  password = "ReadySetGo";
+  username = 'Shivaji';
+  password = 'ReadySetGo';
   remember = true;
 
   constructor() { }
 
   ngOnInit() {
   }
 
-  onSubmit(value) {
-    console.log(value);
+  onSubmit(form: NgForm) {
+    console.log(form.value);
   }
 
 }