Skip to content

nilsmehlhorn/ngx-observe

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm-badge   travis-badge   codecov-badge

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

npm i ngx-observe

Usage

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

About

Angular Structural Directive for Observables

Resources

License

Stars

Watchers

Forks

Packages

No packages published