Lightweight Angular component to simplify asynchronous data loading.
npm install ngx-data-loaderLightweight Angular component to simplify asynchronous data loading.
Install the package:
``bash`
npm install ngx-data-loader
Import the module:
`typescript
import { NgxDataLoaderModule } from "ngx-data-loader";
@NgModule({
imports: [
NgxDataLoaderModule,
// ...
],
// ...
})
export class AppModule {}
`
`html`
@for (todo of todos; track todo.id) {
Title: {{ todo.title }}
Completed: {{ todo.completed ? "Yes" : "No" }}
}
`typescript
/ app.component.ts /
@Component({
// ...
})
export class AppComponent {
getTodos = () => this.http.get("https://jsonplaceholder.typicode.com/todos");
constructor(private http: HttpClient) {}
}
`
`html
`
`html`
Title: {{ todo.title }}
Completed: {{ todo.completed ? 'Yes' : 'No' }}
`typescripthttps://jsonplaceholder.typicode.com/todos/${id}
/ app.component.ts /
@Component({
// ...
})
export class AppComponent {
getTodo = ({ id }: { id: string }) =>
this.http.get();
constructor(
private http: HttpClient,
public route: ActivatedRoute,
) {}
}
`
⚡️ View advanced demo on StackBlitz
` {{ product.description }}html`Search
[loadFnArgs]="searchbox.value"
[debounceTime]="300"
>
{{ results.total }} search results for "{{ searchbox.value }}"
@for (product of results.products; track product.id) {
{{ product.title }}
}
`typescript
/ 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) {}
}
`
| Name | Description | Template Context |
| ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| loadedTemplate | Template shown when data has loaded (#loaded) | $implicit: T - the loaded dataloading: boolean - true if data is reloading (only if showStaleData is true) |loadingTemplate
| | Template shown when data is loading (#loading) | _(none)_ |errorTemplate
| | Template shown when data failed to load (#error) | $implicit: Error - the error objectretry: () => void - function to retry loading data |
| Name | Description |
| ------------------------------ | -------------------------------------------------------------------------------------- |
| loadFn: () => Observable | Function that returns an Observable of the data to load. Called on init and on reload. |loadFnArgs?: any
| | Arguments to pass to loadFn. Changes trigger a reload. |initialData?: T
| | Data to display on init. If set, loadFn is not called on init. |debounceTime: number
| | Milliseconds to debounce reloads. |showStaleData: boolean
| | Keep displaying previous data while reloading. Default is false. |loadingTemplateDelay: number
| | Delay before showing the loading template (in milliseconds). Default is 0. |
| Name | Description |
| ------------------------ | -------------------------------------------------------------- |
| reload() | Resets the loading state and calls loadFn. |cancel()
| | Cancels the pending loadFn and aborts related HTTP requests. |setData(data: T)
| | Updates the state as if data was loaded through loadFn. |setError(error: Error)
| | Updates the state as if an error occurred in loadFn. |
| Name | Description |
| --------------------- | ------------------------------------------------- |
| dataLoaded | Emits when data loads successfully. |loadAttemptStarted
| | Emits when data loading starts. |loadAttemptFailed
| | Emits when data fails to load. |loadAttemptFinished
| | Emits when loading finishes (success or failure). |loadingStateChange
| | Emits the entire loading state when it changes. |
`typescript`
interface LoadingState
loading: boolean;
loaded: boolean;
error?: Error;
data?: T;
}
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:
`html`
`typescript`
// 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.
Please read CONTRIBUTING.md.
The MIT License (MIT). See License File for details.
For issues or questions, please use the GitHub issues page.