ng-suspense v0.0.8

ng-suspense

Set of directives for work with async data sources.

Gives ability to handle loading, error and resolved states of Observbale or Promise.

Instalation

npm install ng-suspense --save

Usage

Import the ng-suspnse module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSuspenseModule } from 'ng-suspense';
import { AppComponent } from './app.component';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgSuspenseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use directive inside component template to provide different templates for different states

<h1>Posts</h1>
<div [ngSuspense]="posts$">
  <div *ngSuspenseError="let error" class="error">Unable to load posts</div>
  <div *ngSuspensePlaceholder="500">Loading...</div>
  <ng-container *ngSuspenseSuccess="let posts">
    <div *ngFor="let post of posts">{{post.title}}</div>
  </ng-container>
</div>

NgSuspense

A structural directive which adds or removes templates when provided Observable|Promise changes its state.

Selectors

ngSuspense

Properties

Description

The ngSuspense directive on a container specifies an Observable or Promise to watch on. Whenever state of provided object changes сoresponding template will be rendered.

• If object changes state to error a view with the ngSuspenseError directive is rendered
• If object emmits any value a view with the ngSuspenseSuccess directive is rendered
• If no value emmited a view with the ngSuspensePlaceholder directive is rendered

NgSuspensePlaceholder

Provides a template which should be rendered while Observable or Promise object of enclosing NgSuspense have not produced any value.

Properties

Description

Withing a ngSuspense conainer ngSuspensePlaceholder directive provides a template and delay in milliseconds when this template will be showed.

NgSuspenseError

Provides a template which should be rendered when Observable|Promise in enclosing ngSuspense change its state to error.

Properties

Using non-inlined template

Usually error template inlined with ngSuspenseError directive, but it can be changed using binding (just like then and else in ngIf). Because it is binded the template reference can be changed at runtime.

Storing error object in a value

A common pattern is to show different templates for different error types. NgSuspenseError directive provides { $imlicit: error } as a context for rendered template.

<ng-container *ngSuspenseError="let error">
  <ng-container [ngSwitch]="error.status">
    <div *ngSwitchCase="404">Post not found</div>
    <div *ngSwitchCase="401">Not authenticated</div>
    <div *ngSwitchВefault>Uncnown error</div>
  </ng-container>
</ng-container>

NgSuspenseSuccess

Provides a template for resolved value

Properties

Using non-inline templates

Sometimes you need to provide template in runtime. In this case you can provide it as an inpunt for ngSuspenseSuccess

Store result in a value

ngSuspenseSuccess provides { $implicit: responseData } as a context for the templatte.

<ng-container [ngSuspense]="posts$">
  <div *ngSuspenseSuccess="let posts"><div *ngFor="let post of posts">{{post.title}}</div></div>
</ng-container>