ngx-data-loader v10.0.1

NgxDataLoader

Lightweight Angular component to simplify asynchronous data loading.

Demo

⚡️ View demo on StackBlitz

Installation

Install the package:

npm install ngx-data-loader

Import the module:

import { NgxDataLoaderModule } from "ngx-data-loader";

@NgModule({
  imports: [
    NgxDataLoaderModule,
    // ...
  ],
  // ...
})
export class AppModule {}

Usage

Basic Example

<!-- app.component.html -->
<ngx-data-loader [loadFn]="getTodos">
  <ng-template #loading>Loading todos...</ng-template>
  <ng-template #error let-error
    >Failed to load todos. {{ error.message }}</ng-template
  >
  <ng-template #loaded let-todos>
    @for (todo of todos; track todo.id) {
      <div>
        Title: {{ todo.title }}<br />
        Completed: {{ todo.completed ? "Yes" : "No" }}
      </div>
    }
  </ng-template>
</ngx-data-loader>

/* app.component.ts */
@Component({
  // ...
})
export class AppComponent {
  getTodos = () => this.http.get("https://jsonplaceholder.typicode.com/todos");

  constructor(private http: HttpClient) {}
}

Reloading Data

<!-- app.component.html -->
<button (click)="todosLoader.reload()">Reload Todos</button>

<ngx-data-loader [loadFn]="getTodos" #todosLoader>
  <!-- Loading and Error templates -->
  <!-- ... -->
  <ng-template #loaded let-todos>
    <!-- Content here -->
    <!-- ... -->
  </ng-template>
</ngx-data-loader>

Loading Data Based on Route Parameters

<!-- app.component.html -->
<ngx-data-loader [loadFn]="getTodo" [loadFnArgs]="route.params | async">
  <ng-template #loading>Loading todo...</ng-template>
  <ng-template #error>Failed to load todo.</ng-template>
  <ng-template #loaded let-todo>
    Title: {{ todo.title }}<br />
    Completed: {{ todo.completed ? 'Yes' : 'No' }}
  </ng-template>
</ngx-data-loader>

/* app.component.ts */
@Component({
  // ...
})
export class AppComponent {
  getTodo = ({ id }: { id: string }) =>
    this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);

  constructor(
    private http: HttpClient,
    public route: ActivatedRoute,
  ) {}
}

Loading Data Based on Search Input

⚡️ Open on StackBlitz

⚡️ View advanced demo on StackBlitz

<!-- app.component.html -->
<h1>Search</h1>
<input ngModel #searchbox placeholder="Search" />
<ngx-data-loader
  [loadFn]="searchProducts"
  [loadFnArgs]="searchbox.value"
  [debounceTime]="300"
>
  <ng-template #loading>Searching...</ng-template>
  <ng-template #error>Error</ng-template>
  <ng-template #loaded let-results>
    <h2>{{ results.total }} search results for "{{ searchbox.value }}"</h2>
    @for (product of results.products; track product.id) {
      <div>
        <h3>{{ product.title }}</h3>
        <p>{{ product.description }}</p>
      </div>
    }
  </ng-template>
</ngx-data-loader>

/* app.component.ts */
@Component({
  // ...
})
export class AppComponent {
  searchProducts = (keywords: string) =>
    this.http.get("https://dummyjson.com/products/search", {
      params: { q: keywords },
    });

  constructor(private http: HttpClient) {}
}

Template Slots

Properties

Methods

Events

Interfaces

interface LoadingState<T> {
  loading: boolean;
  loaded: boolean;
  error?: Error;
  data?: T;
}

FAQ

How to get type safety for the data loaded by NgxDataLoaderComponent?

Angular doesn't currently support type inference for template variables. To get type safety, you can use a presentational component inside the #loaded template that takes the data as a typed input.

Example:

<!-- app.component.html -->
<ngx-data-loader [loadFn]="getTodos">
  <!-- ... -->
  <ng-template #loaded let-todos>
    <app-todo-list [todos]="todos"></app-todo-list>
  </ng-template>
</ngx-data-loader>

// todo-list.component.ts
@Component({
  // ...
})
export class TodoListComponent {
  @Input() todos: Todo[];
}

This ensures type safety within your component's template.

If you need template type inference, consider using ngx-load-with. Its API is similar and supports type inference.

Contributing

Please read CONTRIBUTING.md.

License

The MIT License (MIT). See License File for details.

Contact

For issues or questions, please use the GitHub issues page.