fixed category viewing and editing on several pages

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

@@ -1,5 +1,5 @@
 <td (click)="recurClick()">{{recur.seller}}</td>
-<td (click)="recurClick()">{{recur.category}}</td>
+<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
 <td (click)="recurClick()">{{recur.essential}}</td>
 <td (click)="recurClick()">{{updatedDate}}</td>
 <td (click)="recurClick()">{{recur.recurring_period}}</td>

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

@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import * as moment from 'moment';
 
 interface RecurData {
-  category: string;
+  category: number;
   essential: number;
   id: number;
   last_updated: string;
@@ -20,6 +20,7 @@ interface RecurData {
 export class RecurResultComponent {
   @Input() public recur: RecurData;
   @Output() public onClick = new EventEmitter();
+  @Input() public categories: any;
   public updatedDate: string;
 
   ngOnInit(): void {

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

@@ -11,7 +11,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr recur-result *ngFor="let recur of recurList" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
+      <tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
     </tbody>
   </table>
 </div>

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

@@ -20,6 +20,8 @@ interface RecurData {
 export class RecurTableComponent {
   @Input() public recurList: Array<RecurData>;
   @Output() public onClick = new EventEmitter();
+  @Input() public categories: any;
+
 
   public recurClick(event: any): void {
     this.onClick.emit( event );