Easily render templates based on the state of a promise: - inactive - pending - success - error
npm install @klippa/ngx-async-templateEasily render templates based on the state of a promise:
- inactive
- pending
- success
- error
yarn add @klippa/ngx-async-templatenpm install @klippa/ngx-async-templateI 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 {}
`
`html
loading not yet started
loading
result is {{users}}
something went wrong {{myErrors}}
Always rendered, state is {{myState}}
`
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.let-myErrors="errorMessages"
- To extract errors provided by a promise you can use 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 ( where myState` can be any name you want.