Boolean approach template - Slaying a UI Antipattern with Angular

app.component.html

  <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.isLoading && !service.state.error && service.state.data">
    <p>
      Sunrise: {{ service.state.data.sunrise }}<br>
      Sunset: {{ service.state.data.sunset }}
    </p>
  </div>

  <div class="pure-u-1-1" *ngIf="!service.state.isLoading && service.state.error">
    <p class="error">
      Error: {{ service.state.error }}
    </p>
  </div>