Add transfer component

src/app/app-routing.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './authentication/login/login.component';
+import { TransferComponent } from './transfers/transfer/transfer.component';
 const routes: Routes = [
   {path: '', component : LoginComponent},
+  {path: 'transfer', component : TransferComponent},
   {path: '**', redirectTo : ''}
 ];
 @NgModule({

src/app/app.component.ts

@@ -30,6 +30,11 @@ export class AppComponent implements OnInit, OnDestroy {
       icon: 'person',
       link: 'login'
     },
+    {
+      title: 'Tranfers',
+      icon: 'compare_arrows',
+      link: '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 { TransferComponent } from './transfers/transfer/transfer.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     ForgotPasswordComponent,
     SignUpComponent,
-    VerificationComponent
+    VerificationComponent,
+    TransferComponent
   ],
   imports: [
     BrowserAnimationsModule,

src/app/beneficiary/beneficiary.component.html

@@ -0,0 +1,72 @@
+
+
+<mat-card>
+<div class="row">
+  <div class="col-md-6">
+    <h2>Beneficiaries List</h2>
+  </div>
+  <div class="col-md-6">
+    <mat-form-field>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
+    </mat-form-field>
+  </div>
+</div>
+</mat-card>
+
+<div class="example-container mat-elevation-z8">
+<table mat-table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="Id" sticky>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
+    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+  </ng-container>
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="Account">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account </th>
+    <td mat-cell *matCellDef="let element"> {{element.account}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="AccountType">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Type </th>
+    <td mat-cell *matCellDef="let element"> {{element.accountType}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="TransferLimit">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Transfer Limit </th>
+    <td mat-cell *matCellDef="let element"> {{element.transferLimit}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="Name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="OfficeName" mat-sort-header>
+    <th mat-header-cell *matHeaderCellDef> Office Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="ClientName" mat-sort-header> 
+    <th mat-header-cell *matHeaderCellDef> Client Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.clientName}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="Actions">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+    <td mat-cell *matCellDef="let element"> {{element.actions}} </td>
+  </ng-container>
+
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+</div>

src/app/transfers/transfer/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/transfer/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/transfer/transfer.component.ts

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