title: Angular2 Observable error handling in template
body: <p>I like the approach of new angular with observables. It prevents us from writing a long chain of <code>.done().fail().always()</code>. like in JQuery. It is happening under the hood in NG2 using only <code>| async pipe</code>. But how about the case when there might be exceptional case while loading data for <code>myObservable</code>. Is there any way how to figure out that observable failed in template?</p>
  
  <p>// sample.component.ts</p>
  
  <pre><code>class SimpleComponent{
     myObservable:Observable&lt;string&gt;;
     constructor(private _someService:SomeService){
         myObservable = _someService.getSomeDataByHttp();
     }
  }
  </code></pre>
  
  <p>// simple.component.html</p>
  
  <pre><code>&lt;div&gt;
     &lt;div&gt;
        {{myObservable | async}}
     &lt;/div&gt;
     &lt;div (anyErrorInObservable)="myObservable"&gt; // Some kind of construction to figure out that observable failed to load
         Oops, some kind of error appeared while fetching myObservable.
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know that this can be done using <code>.catch()</code>. But I hope that there is some kind of better approach. </p>
  
  <p>Thanks for any advance</p>