ngx-observe is an Angular structural directive with first-class support for observables.
You can find an in-depth explanation here.
Installation
npm i ngx-observeUsage
Import NgxObserveModule:
import { NgxObserveModule } from 'ngx-observe';
@NgModule({
imports: [
...
NgxObserveModule
],
...
})
export class AppModule { }Bind observable with Angular microsyntax. You might also then configure your component to use OnPush-ChangeDetection.
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
users$: Observable<User>
constructor(private http: HttpClient) {}
ngOnInit() {
this.users$ = this.http.get<User[]>('/users')
}
}<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 |
