Add wildcard path and PageNotFound Component

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { GreeceComponent } from './greece/greece.component';
 import { SpainComponent } from './spain/spain.component';
 import { AccountComponent } from './account/account.component';
 import { ContactUsComponent } from './contact-us/contact-us.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 const routes: Routes = [
   { path:'england', component: EnglandComponent },
@@ -13,7 +14,8 @@ const routes: Routes = [
   { path:'greece', component: GreeceComponent },
   { path:'spain', component: SpainComponent },
   { path:'account', component: AccountComponent },
-  { path:'contact-us', component: ContactUsComponent }
+  { path:'contact-us', component: ContactUsComponent },
+  { path: '**', component: PageNotFoundComponent},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -14,10 +14,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { IvyCarouselModule } from 'angular-responsive-carousel';
 import { AccountComponent } from './account/account.component';
 import { ContactUsComponent } from './contact-us/contact-us.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 
 @NgModule({
-  declarations: [				
+  declarations: [					
     AppComponent,
     HeaderComponent,
     FooterComponent,
@@ -26,7 +27,8 @@ import { ContactUsComponent } from './contact-us/contact-us.component';
     GreeceComponent,
     SpainComponent,
     AccountComponent,
-    ContactUsComponent
+    ContactUsComponent,
+      PageNotFoundComponent
    ],
   imports: [
     BrowserModule,

src/app/contact-us/contact-us.component.css

@@ -17,6 +17,11 @@
 	padding: 5px;
     outline: none;
     margin-top: 10px;
+    transition: all 0.1s;
+}
+
+.message-form-input:focus {
+    border:2px solid #6fb7f1;
 }
 
 .textarea {
@@ -28,6 +33,11 @@
     border-radius: 5px;
     padding: 10px 274px;
     margin-top: 5px;
+    transition: all 0.2s;
+}
+
+.submit-button:hover {
+    transform: scale(1.03);
 }
 
 .ng-invalid.ng-touched:not(form) {
@@ -37,4 +47,5 @@
 .contact-error-message {
     margin: 0px 2px 0px;
     color: red;
-}
+    text-align: left;
\ No newline at end of file
+}

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

 <div class="contact-us-container">
-  <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+  <form class="message-form" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
     <h1>Contact Us</h1>
     <div class="message-input-container">
       <div>

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

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-contact-us',

src/app/page-not-found/page-not-found.component.css

+.page-not-exist-container {
+    width: 100%;
+    margin-top: 50px;
+}
+
+.page-not-exist-text {
+    text-align: center;
+    margin: 3px;
+    width: 100%;
+}
\ No newline at end of file

src/app/page-not-found/page-not-found.component.html

+<div class="page-not-exist-container">
+  <h3 class="page-not-exist-text">Sorry...</h3>
+  <p class="page-not-exist-text">This page doesn't exist</p>
+  <p class="page-not-exist-text">go somewhere else</p>
+</div>
\ No newline at end of file

src/app/page-not-found/page-not-found.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page-not-found/page-not-found.component.ts

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