Add very simple prediction delta UI

src/app/prediction-delta/prediction-delta.component.html

@@ -0,0 +1,10 @@
+<h4>Enter the names of two predictions to compare</h4>
+
+<rb-form-input label="Prediction A" [(ngModel)]="nameA"></rb-form-input>
+<rb-form-input label="Prediction B" [(ngModel)]="nameB"></rb-form-input>
+<p *ngIf="delta">
+	The result is {{ delta }}.
+</p>
+<rb-icon-button icon="forward-right" mode="primary" (click)="compare()">
+	Compare Predictions
+</rb-icon-button>

src/app/prediction-delta/prediction-delta.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PredictionDeltaComponent } from './prediction-delta.component';
+
+describe('PredictionDeltaComponent', () => {
+  let component: PredictionDeltaComponent;
+  let fixture: ComponentFixture<PredictionDeltaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PredictionDeltaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PredictionDeltaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/prediction-delta/prediction-delta.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { ApiService } from '../services/api.service';
+
+@Component({
+	selector: 'app-prediction-delta',
+	templateUrl: './prediction-delta.component.html',
+	styleUrls: ['./prediction-delta.component.scss'],
+	animations: [
+		trigger(
+			'inOut', [
+				transition(':enter', [
+					style({height: 0, opacity: 0}),
+					animate('0.5s ease-out', style({height: '*', opacity: 1}))
+				]),
+				transition(':leave', [
+					style({height: '*', opacity: 1}),
+					animate('0.5s ease-in', style({height: 0, opacity: 0}))
+				])
+			]
+		)
+	]
+})
+export class PredictionDeltaComponent {
+
+	nameA: String;
+	nameB: String;
+	delta: Number;
+
+	constructor(
+		private api: ApiService,
+	) {}
+
+	// Compares the two predictions
+	compare() {
+		let data = { nameA: this.nameA, nameB: this.nameB };
+		this.api.post<Number>('/prediction/compare', data, result => {
+			this.delta = result;
+		});
+	}
+}