[![npm-badge](https://img.shields.io/npm/v/ngx-observe.svg?style=flat-square)](https://www.npmjs.com/package/ngx-observe)
 
[![codecov-badge](https://codecov.io/gh/nilsmehlhorn/ngx-observe/branch/master/graph/badge.svg)](https://codecov.io/gh/nilsmehlhorn/ngx-observe)

ngx-observe is an Angular structural directive with first-class support for observables.

🧩 designated loading & error templates
⚠️ access to errors
✅ support for falsy values
🚀 OnPush ready

⚡ [Example StackBlitz](https://stackblitz.com/github/nilsmehlhorn/ngx-observe-example)

You can find an in-depth explanation [here](https://nils-mehlhorn.de/posts/angular-observable-directive/).

## Installation

```bash
npm i ngx-observe
```

## Usage

Import `NgxObserveDirective` in your component or module. Then bind an observable with [Angular microsyntax](https://angular.dev/guide/directives/structural-directives). You might also then configure your component to use OnPush-ChangeDetection.

```typescript
import { NgxObserveModule } from 'ngx-observe';

@Component({
  // ...
  imports: [
    NgxObserveDirective 
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  users$: Observable<User>

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.users$ = this.http.get<User[]>('/users')
  }
}
```
```html
<p *ngxObserve="users$ as users; before loadingTemplate; error errorTemplate">
  There are {{ users.length }} online.
</p>
<ng-template #loadingTemplate>
  <p>Loading ...</p>
</ng-template>
<ng-template #errorTemplate let-error>
  <p>{{ error }}</p>
</ng-template>
```
| Input | Type | Description
| ---   | ---         | --- |
| ngxObserve | `Observable<T>` | Observable to display |
| ngxObserveBefore | `TemplateRef<undefined>` | Template to display before observable emits first value |
| ngxObserveError | `TemplateRef<ErrorContext>` | Template to display when observable errors |
| ngxObserveNext | `TemplateRef<ObserveContext>` | Template to display for emitted values |