ngx-data-loader

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

<!-- app.component.html -->
<ngx-data-loader [getDataFn]="getTodo">
  <ng-template #dataTemplate let-todo>
    Title: {{ todo.title }} <br />
    Completed: {{ todo.completed ? 'Yes' : 'No' }}
  </ng-template>
</ngx-data-loader>

/* app.component.ts */
@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.