Angular Structural Directive for Observables
npm install 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
You can find an in-depth explanation here.
``bash`
npm i ngx-observe
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() { Loading ... {{ error }}
this.users$ = this.http.get
}
}
``html`
There are {{ users.length }} online.
Observable
| Input | Type | Description
| --- | --- | --- |
| ngxObserve | | Observable to display |TemplateRef
| ngxObserveBefore | | Template to display before observable emits first value |TemplateRef
| ngxObserveError | | Template to display when observable errors |TemplateRef
| ngxObserveNext |