ngx-data-loader - npm Package Compare versions

Comparing version 5.0.2 to 5.0.3

package.json

		{
		"name": "ngx-data-loader",
		"version": "5.0.2",
		"version": "5.0.3",
		"peerDependencies": {
		@@ -5,0 +5,0 @@ "@angular/common": ">=15.0.0",

README.md

		@@ -15,7 +15,7 @@ # NgxDataLoader

		`NgxDataLoaderComponent` is a powerful tool for simplifying asynchronous data loading in Angular. By abstracting away complex tasks such as error handling, cancel/reload strategies, and template display logic, it enables developers to focus on what matters most: building robust applications that deliver seamless user experiences.
		`NgxDataLoaderComponent` simplifies asynchronous data loading in Angular by abstracting away tedious tasks such as error handling, cancel/reload strategies, and template display logic. This helps you focus on the core functionality of your application.

		To use it, provide a `loadFn` that returns an `Observable` of the data, and optional templates for each loading phase.
		A key feature of `NgxDataLoaderComponent` is its ability to handle dynamic arguments through the use of `loadFnArgs`. This feature enables you to pass in dynamic arguments to `loadFn`, and each time the value changes, `loadFn` is triggered with the new arguments. This makes it easy to load data based on route parameters or the value of an input field.

		The component also offers features such as auto retry and timeout configuration, server-side rendering with `initialData`, and optimistic updates with `setData`.
		To use the component, provide a `loadFn` that returns an `Observable` of the data, and optional templates for each loading phase.

		@@ -25,7 +25,6 @@ ## Features
		- Declarative syntax that handles display and loading logic behind the scenes
		- Automatic reload on input changes
		- Provides `reload` and `cancel` methods
		- Automatic cancellation of ongoing http requests on cancel/reload/destroy[^note]
		- Configure auto retry and timeout
		- Supports server-side rendering through `initialData` input
		- Supports optimistic updates through `setData` method
		- Configurable retry and timeout

		@@ -61,7 +60,39 @@ ## Demo

		### Basic example:

		```html
		<!-- app.component.html -->
		<ngx-data-loader [loadFn]="getTodo">
		<ng-template #loading> Loading... </ng-template>
		<ng-template #loading> Loading todos... </ng-template>

		<ng-template #error> Failed to load todos. </ng-template>

		<ng-template #loaded let-todos>
		<div *ngFor="let todo of todos">
		Title: {{ todo.title }} <br />
		Completed: {{ todo.completed ? 'Yes' : 'No' }}
		</div>
		</ng-template>
		</ngx-data-loader>
		```

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

		constructor(private http: HttpClient) {}
		}
		```

		### Loading data based on route parameters:

		```html
		<!-- app.component.html -->
		<ngx-data-loader [loadFn]="getTodo" [loadFnArgs]="route.params \| async">
		<ng-template #loading> Loading todo... </ng-template>

		<ng-template #loaded let-todo>
		@@ -85,5 +116,5 @@ Title: {{ todo.title }} <br />
		export class AppComponent {
		getTodo = () => this.http.get('https://jsonplaceholder.typicode.com/todos/1');
		getTodo = ({id: string}) => this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);

		constructor(private http: HttpClient) {}
		constructor(private http: HttpClient, public route: ActivatedRoute) {}
		}
		@@ -133,3 +164,3 @@ ```

		[^note]: You must use Angular's `HttpClient` for http request cancellation to work.
		[^note]: Automatic cancellation of http requests requires support from the underlying http library. It works out of the box with Angular's HttpClient, but may require additional configuration if using a different library

		@@ -136,0 +167,0 @@ ## Interfaces

ngx-data-loader - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics