RemoteData approach template - Slaying a UI Antipattern with Angular

app.component.html

  <div class="pure-u-1-1 welcome" *ngIf="service.state | isNotAsked">
    <p>Welcome, use the controls above to obtain today's sunset and sunrise times.</p>
  </div>

  <div class="pure-u-1-1" *ngIf="service.state | isLoading">
    <p class="loading">
      Loading...
    </p>
  </div>

  <div class="pure-u-1-1" *ngIf="service.state | isSuccess">
    <p>
      Sunrise: {{ service.extractSuccess().results.sunrise }}<br>
      Sunset: {{ service.extractSuccess().results.sunset }}
    </p>
  </div>

  <div class="pure-u-1-1" *ngIf="service.state | isFaliure">
    <p class="error">
      Error: {{ service.extractFaliure() }}
    </p>
  </div>