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

You can find an in-depth explanation here.

Installation

``bash
npm i ngx-observe
`

Usage

Import NgxObserveDirective in your component or module. Then bind an observable with Angular microsyntax. 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

constructor(private http: HttpClient) {}

ngOnInit() {
this.users$ = this.http.get('/users')
}
}
`
`html



There are {{ users.length }} online.


Loading ...

{{ error }}

`
| Input | Type | Description
| --- | --- | --- |
| ngxObserve | Observable | Observable to display |
| ngxObserveBefore | TemplateRef | Template to display before observable emits first value |
| ngxObserveError | TemplateRef | Template to display when observable errors |
| ngxObserveNext | TemplateRef` | Template to display for emitted values |