[W8D3] (ArndtED) Adds contactUs component, links from footer

myApp/src/app/account/account.component.html

 <div>
-<form [formGroup]="userForm" (ngSubmit)="onSubmit1()">
-
-    <p>Sign up</p>
-  
     <div>
-        <div>
-            <input type="text" formControlName="firstName"  class="form-control input" placeholder="First name">
-        </div>
-        <div>
-            <input type="text" formControlName="lastName" class="form-control input " placeholder="Last name">
-        </div>
-    </div>
-  
-    <input type="email" formControlName="email"  class="form-control  input" placeholder="E-mail">
-    <div>
-        <button  type="submit">Sign in</button>
-    </div>
-  </form>
-  <div >
-    <!-- <ngb-alert  *ngIf="showMessage" type="danger" >{{ invalidEntry }}</ngb-alert> -->
-    <!-- <div class= "invalid-text" *ngIf="showMessage">
-        {{invalidEntry}}
-    </div> -->
-  </div>
-</div>
-
-<div>
     <div style="display:inline-block">
     <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
           <div>
@@ -49,7 +23,9 @@
         </div> -->
       </div>
     </div>
+</div>
       <!-- template driven form -->
+      <div>
       <div style="display:inline-block; margin-left: 10em;">
       <form #newUserForm="ngForm" (ngSubmit)="onSubmit2(newUserForm)">
     <div>
@@ -88,5 +64,6 @@
       <!-- <pre>{{ newUserForm.form.value }}</pre> Value of whole form -->
     <!-- <pre>User name: {{ pickedName.value }}</pre> Value of userName field -->
     <pre>Valid form? {{ newUserForm.form.valid }}</pre>
+</div>
     </div>
     </div>
\ No newline at end of file

myApp/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AccountComponent } from './account/account.component';
+import { ContactUsComponent } from './contact-us/contact-us.component';
 import { EnglandComponent } from './england/england.component';
 import { FranceComponent } from './france/france.component';
 import { GreeceComponent } from './greece/greece.component';
@@ -11,7 +12,8 @@ const routes: Routes = [
 	{path:'france', component: FranceComponent}, 
 	{path:'spain', component: SpainComponent}, 
 	{path:'greece', component: GreeceComponent},
-	{path:'account', component: AccountComponent}
+	{path:'account', component: AccountComponent},
+	{path:'contactUs', component: ContactUsComponent}
 ];
 
 @NgModule({

myApp/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { FranceComponent } from './france/france.component';
 import { SpainComponent } from './spain/spain.component';
 import { GreeceComponent } from './greece/greece.component';
 import { AccountComponent } from './account/account.component';
+import { ContactUsComponent } from './contact-us/contact-us.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { AccountComponent } from './account/account.component';
     FranceComponent,
     SpainComponent,
     GreeceComponent,
-    AccountComponent
+    AccountComponent,
+    ContactUsComponent
   ],
   imports: [
     BrowserModule,

myApp/src/app/contact-us/contact-us.component.html

+<p>contact-us works!</p>

myApp/src/app/contact-us/contact-us.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactUsComponent } from './contact-us.component';
+
+describe('ContactUsComponent', () => {
+  let component: ContactUsComponent;
+  let fixture: ComponentFixture<ContactUsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactUsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

myApp/src/app/contact-us/contact-us.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-us',
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.css']
+})
+export class ContactUsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

myApp/src/app/footer/footer.component.html

@@ -2,6 +2,7 @@
     <ul>
         <li>About Us</li>
         <li>Careers</li>
-        <li>Contact Us</li>
+        <!-- <button [routerLink]="['/england']">England</button> -->
+        <li [routerLink]="['/contactUs']">Contact Us</li>
     </ul>
 </div>