NgxDataLoader
Async data container component for Angular 14+.
Most async data loading in Angular is done the same way: show a loading indicator while the data is loading, then show the data when it's loaded, or show an error message or a retry button if the data failed to load.
The NgxDataLoader component makes this easy. You only need to provide a getDataFn
that returns an Observable
or Promise
with the data, and a dataTemplate
that renders the data.
The component will handle the rest.
Demo
View demo at https://ngx-data-loader.netlify.app
Getting started
Install the package
npm install ngx-data-loader
Import the module
import { NgxDataLoaderModule } from 'ngx-data-loader';
@NgModule({
imports: [
NgxDataLoaderModule,
...
],
...
})
export class AppModule {}
Use the component
<ngx-data-loader [getDataFn]="getTodo">
<ng-template #dataTemplate let-todo>
Title: {{ todo.title }} <br />
Completed: {{ todo.completed ? 'Yes' : 'No' }}
</ng-template>
</ngx-data-loader>
@Component({
...
})
export class AppComponent {
getTodo = () => this.http.get('https://jsonplaceholder.typicode.com/todos/1');
constructor(private http: HttpClient) {}
}
Templates
Name | Description |
---|
@ContentChild('dataTemplate')
dataTemplate?: TemplateRef<any> | Template to be displayed when the data is loaded. |
@ContentChild('skeletonTemplate)
skeletonTemplate?: TemplateRef<any> | Template to be displayed when the data is loading. |
@ContentChild('errorTemplate')
errorTemplate?: TemplateRef<any> | Template to be displayed when the data failed to load. |
Properties
Name | Description |
---|
@Input()
getDataFn: () => Observable<T> | Promise<T> | Function that returns the data to be loaded. |
@Input()
retries: number | Number of times to retry loading the data. Default: 0 |
@Input()
retryDelay: number | Delay in milliseconds between retries. Default: 1000 |
@Input()
showStaleData: boolean | Whether to show stale data while reloading. Default: false |
@Input()
skeletonDelay: number | Delay in milliseconds before showing the skeleton. Default: 0 |
@Input()
timeout: number | Number of milliseconds to wait for getDataFn to emit before throwing an error. Default: 30000 |
Events
Name | Description |
---|
@Output()
dataLoaded: EventEmitter<T> | Emitted when the data is loaded. |
@Output()
loadAttemptStarted: EventEmitter<void> | Emitted when the data loading is started. |
@Output()
error: EventEmitter<Error> | Emitted when the data failed to load. |
@Output()
loadAttemptFinished: EventEmitter<void> | Emitted when the data has either loaded or failed to load. |
@Output()
loadingStateChange: EventEmitter<LoadingState<T>> | Emits entire loading state when any of the above events are emitted. |
Methods
Name | Description |
---|
reload | Resets the loading state and calls the getDataFn that you provided. |