Fully working table org search and better error

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

@@ -0,0 +1,4 @@
+<td (click)="orgClick()">{{org.name}}</td>
+<td (click)="orgClick()">{{org.street_name}}</td>
+<td (click)="orgClick()">{{org.town}}</td>
+<td (click)="orgClick()">{{org.postcode}}</td>

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

@@ -1,10 +1,24 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
 
 @Component({
-  selector: 'org-result',
-  template:'banana {{ organisation }}',
+  selector: '[org-result]',
+  templateUrl: 'org-result.component.html',
 })
 export class OrgResultComponent {
-  @Input() organisation: any;
-  
-}
+  @Input() public org: OrgData;
+  @Output() public onClick = new EventEmitter();
+
+  public orgClick(): void {
+    this.onClick.emit(
+      this.org
+    )
+  }
+}

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

@@ -0,0 +1,19 @@
+<div class="form-group row">
+  <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Search Results</strong></label>
+  <div class="col-md-9">
+    <span class="help-block"><strong>Select an Organisation from the table below</strong></span>
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Organisation Name</th>
+          <th>Street Name</th>
+          <th>Town</th>
+          <th>Postcode</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr org-result *ngFor="let org of orgList" [org]="org" (onClick)="orgClick($event)"></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { OrgResultComponent } from '../shared/org-result.component';
+
+interface OrgData {
+  id: number;
+  name: string;
+  street_name: string;
+  town: string;
+  postcode: string;
+}
+
+@Component({
+  selector: 'org-table',
+  templateUrl: 'org-table.component.html',
+})
+export class OrgTableComponent {
+  @Input() public orgList: Array<OrgData>;
+  @Output() public onClick = new EventEmitter();
+
+  public orgClick(event: any): void {
+    this.onClick.emit( event );
+  }
+}