Simplify Angular 2 template where possible

templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.html

@@ -0,0 +1,24 @@
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+<p *ngIf="!forecasts"><em>Loading...</em></p>
+
+<table class='table' *ngIf="forecasts">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let forecast of forecasts">
+            <td>{{ forecast.dateFormatted }}</td>
+            <td>{{ forecast.temperatureC }}</td>
+            <td>{{ forecast.temperatureF }}</td>
+            <td>{{ forecast.summary }}</td>
+        </tr>
+    </tbody>
+</table>

templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Http } from '@angular/http';
+
+@Component({
+  selector: 'fetchdata',
+  template: require('./fetchdata.component.html')
+})
+export class FetchDataComponent {
+    public forecasts: WeatherForecast[];
+
+    constructor(http: Http) {
+        http.get('/api/SampleData/WeatherForecasts').subscribe(result => {
+            this.forecasts = result.json();
+        });
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}