Angular Async Render (Async Resolvers)
Are you sick of the navigation blocking Angular resolver. No problem... just use the async-render component for the different parts of you app that need to be rendered
and create directive resolvers that you can attach to the inidvidual async render components. You can also provide your cool loader to be visualized while loading
the data or you can use the exported async render component/directive (using asyncRender
) with a template variable to be able to get access to the isLoading
variable. You can also trigger a refresh on all of the resolvers by using the refresh$.next()
subject method or trigger a individual resolve by querying the directive with ViewChild and calling the resolve()
method. You can also configure the resolvers to resolve automatically stream emissions. For more info check out the app or look bellow. Happy coding!
Installation
yarn add hg-async-render
|| npm i hg-async-render
Usage
You can check the src
folder of this repo for a more detailed explanation but the usage is as follows:
1. Configiration (import the AsyncRenderModule to your module)
;
view here)
2. Create your first action based resolver (alternatively you can create a regular resolver with a function call that returns an observable -;;
look here)
3. Use the async render component and the resolver from step.2 (you can also use [hgAsyncRender] directive -<!-- If you want you can create a loader template that will be used while loading --> <!-- Or you can use the userListAsyncRender template variable to manually show hide a loader or a unicorn --> UserListIsLoading: {{userListAsyncRender.isLoading}} <!-- You can use the refresh$.next() to trigger a reload if necessary --> Reload Users <!-- Use the hg-async-render component and feed it with our shiny loader. Alos put the appUserListAsyncResolver directive that we've created in task 2 (don't forget to put it inside the declarations array inside your module before using it). If you need multiple resolvers for the current async-render just put all the directives on the opening tag --> User List {{ user.email }}
Async Render Component Inputs:
loaderTemplateRef: TemplateRef<any>; // the template that will be used for the loader errorTemplateRef: TemplateRef<any>; // the template that will be used for the error autoHideLoader = false; // auto hide the loader template on loading autoShowError = false; // auth show the error template on error
4. DEMO
More Congifirations
1. Use the async render directive to skip the additional element added and use a custom loader
UserPostDepIsLoading (Directive): {{asyncRender.isLoading}}Reload User Post Post {{ post$ | async | json }}
⚠️Since the directive is rendering the template there is no loaderTemplateRef binding. But it's not actually needed since you can just put the loader itself info the template and use the template varialbe to access the state
2. You can also additionally configure the resolvers
;;
3. Regular Resolver
;;;
The result can be accessed via the data$ property on the resolver directive. You can either use ViewChild to get the directive and access the data$ property or by using a template variable like:
User List {{ user.email }}
4. Error Handling
Each resolver has an error property that will contain the error if one exists. You can use this property inside your templates via template reference variable containing the resolver instance (just like the one with name resolver
from the code above section 4) to present the error message/code to the user.