Add Third party transfers Component

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './authentication/login/login.component';
+import { ThirdPartyTransferComponent } from './transfers/third-party-transfer/third-party-transfer.component';
 const routes: Routes = [
   {path: '', component : LoginComponent},
-  {path: '**', redirectTo : ''}
+  {path: 'third-party-transfer', component : ThirdPartyTransferComponent},
+  {path: '**', redirectTo : ''},
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.ts

@@ -30,6 +30,11 @@ export class AppComponent implements OnInit, OnDestroy {
       icon: 'person',
       link: 'login'
     },
+    {
+      title: 'Third Party Transfer',
+      icon: 'compare_arrows',
+      link: 'third-party-transfer'
+    },
   ];
   title = 'Online-Banking-App-3.0';
   mobileQuery: MediaQueryList;

src/app/app.module.ts

@@ -12,14 +12,16 @@ import { SignUpComponent } from './authentication/sign-up/sign-up.component';
 import { ForgotPasswordComponent } from './authentication/forgot-password/forgot-password.component';
 import { VerificationComponent } from './authentication/verification/verification.component';
 import { AppService } from './app.service';
+import { ThirdPartyTransferComponent } from './transfers/third-party-transfer/third-party-transfer.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     ForgotPasswordComponent,
     SignUpComponent,
-    VerificationComponent
+    VerificationComponent,
+    ThirdPartyTransferComponent
   ],
   imports: [
     BrowserAnimationsModule,

src/app/transfers/third-party-transfer/third-party-transfer.component.html

@@ -0,0 +1,42 @@
+<mat-card>
+<div class="example-container">
+    <mat-form-field>
+        <mat-select placeholder="Pay To">
+          <mat-option value="option">Option</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field>
+          <mat-select placeholder="Pay From">
+            <mat-option value="option">Option</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Amount" type="number" class="example-right-align">
+            <span matPrefix>$&nbsp;</span>
+            <span matSuffix>.00</span>
+          </mat-form-field>
+<div class="row">
+  <div class="col-md-6">
+    Transfer Date
+  </div>
+  <div class="col-md-6">
+    <mat-icon>date_range</mat-icon> {{date}}
+    </div>
+</div>
+  <mat-form-field>
+    <textarea matInput placeholder="Remarks"></textarea>
+  </mat-form-field>
+
+  <div class="row">
+    <div class="col-md-6">
+        <button mat-raised-button color="warn">Cancel</button>
+    </div>
+    <div class="col-md-6">
+        <button mat-raised-button color="primary">Review Transfer</button>
+      </div>
+  </div>
+
+
+</div>
+</mat-card>

src/app/transfers/third-party-transfer/third-party-transfer.component.scss

@@ -0,0 +1,32 @@
+mat-card{
+  display:block;
+  margin: 20px auto;
+  width:50%;
+}
+.example-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .example-container > * {
+    width: 100%;
+  }
+  button{
+    display:block;
+    margin: auto;
+    width:80%;
+  }
+
+  @media only screen and (max-width: 768px) {
+    /* For mobile phones: */
+    mat-card{
+      display:block;
+      margin: 15px auto;
+      width:80%;
+    }
+    button{
+      display:block;
+      margin: 5px auto;
+      width:80%;
+    }
+  }

src/app/transfers/third-party-transfer/third-party-transfer.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-third-party-transfer',
+  templateUrl: './third-party-transfer.component.html',
+  styleUrls: ['./third-party-transfer.component.scss']
+})
+export class ThirdPartyTransferComponent implements OnInit {
+  today = new Date();
+  date = '';
+  constructor() { }
+
+  ngOnInit() {
+    this.date = this.today.getFullYear() + '-' + (this.today.getMonth() + 1) + '-' + this.today.getDate();
+  }
+
+}