NgxAsyncTemplate

Easily render templates based on the state of a promise:
- inactive
- pending
- success
- error

Install guide

$3

$3

Import

I recommend importing the module in a generic ui module and then export it from there, so you can use the ngx-async-template everywhere in your app.

``js
import { NgxAsyncTemplateModule } from '@klippa/ngx-async-template';

@NgModule({
imports: [
NgxAsyncTemplateModule,
],
exports: [
NgxAsyncTemplateModule,
],
})
export class UiModule {}
`

Example

`html



loading not yet started


loading


result is {{users}}


something went wrong {{myErrors}}


Always rendered, state is {{myState}}


`

Usage

To render templates, use one or more of the following directives on a ng-template:

- ngx-async-inactive
- ngx-async-pending
- ngx-async-success
- ngx-async-error
- ngx-async-all


- You can extract the value of a successful promise by using let-someVarName="value" where someVarName can be any name you want.
- To extract errors provided by a promise you can use let-myErrors="errorMessages" where myErrors can be any name you want.
- You can also extract the status of a promise, which can be helpful if you have a template with multiple directives () with let-myState="status" where myState` can be any name you want.