Added initial recurring variable viewing

src/app/shared/recur-result.component.html

@@ -0,0 +1,6 @@
+<td (click)="recurClick()">{{recur.seller}}</td>
+<td (click)="recurClick()">{{recur.category}}</td>
+<td (click)="recurClick()">{{recur.essential}}</td>
+<td (click)="recurClick()">{{updatedDate}}</td>
+<td (click)="recurClick()">{{recur.recurring_period}}</td>
+<td (click)="recurClick()">{{recur.value}}</td>

src/app/shared/recur-result.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+interface RecurData {
+  category: string;
+  essential: number;
+  id: number;
+  last_updated: string;
+  recurring_period: string;
+  seller: string;
+  start_time: string;
+  value: number;
+}
+
+@Component({
+  // tslint:disable-next-line
+  selector: '[recur-result]',
+  templateUrl: 'recur-result.component.html',
+})
+export class RecurResultComponent {
+  @Input() public recur: RecurData;
+  @Output() public onClick = new EventEmitter();
+  public updatedDate: string;
+
+  ngOnInit(): void {
+    if (this.recur.last_updated) {
+      this.updatedDate = moment(this.recur.last_updated).format('llll');
+    } else {
+      this.updatedDate = moment(this.recur.start_time).format('llll');
+    }
+  }
+
+  public recurClick(): void {
+    this.onClick.emit(
+      this.recur
+    );
+  }
+}

src/app/shared/recur-table.component.html

@@ -0,0 +1,17 @@
+<div class="form-group row">
+  <table class="table table-striped table-hover">
+    <thead>
+      <tr>
+        <th>Seller</th>
+        <th>Category</th>
+        <th>Essential</th>
+        <th>Last Updated</th>
+        <th>Recurring Period</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
+    </tbody>
+  </table>
+</div>

src/app/shared/recur-table.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RecurResultComponent } from '../shared/recur-result.component';
+
+interface RecurData {
+  category: string;
+  essential: number;
+  id: number;
+  last_updated: string;
+  recurring_period: string;
+  seller: string;
+  start_time: string;
+  value: number;
+}
+
+@Component({
+  // tslint:disable-next-line
+  selector: 'recur-table',
+  templateUrl: 'recur-table.component.html',
+})
+export class RecurTableComponent {
+  @Input() public recurList: Array<RecurData>;
+  @Output() public onClick = new EventEmitter();
+
+  public recurClick(event: any): void {
+    this.onClick.emit( event );
+  }
+}