ngx-data-loader - npm Package Compare versions

Comparing version 7.1.3 to 8.0.0-beta.1

lib/loaded/loaded.component.d.ts

		@@ -7,5 +7,4 @@ import { TemplateRef } from '@angular/core';
		loading: boolean;
		showStaleData: boolean;
		static ɵfac: i0.ɵɵFactoryDeclaration<LoadedComponent, never>;
		static ɵcmp: i0.ɵɵComponentDeclaration<LoadedComponent, "ngx-data-loader-loaded", never, { "loadedTemplate": "loadedTemplate"; "data": "data"; "loading": "loading"; "showStaleData": "showStaleData"; }, {}, never, never, false, never>;
		static ɵcmp: i0.ɵɵComponentDeclaration<LoadedComponent, "ngx-data-loader-loaded", never, { "loadedTemplate": "loadedTemplate"; "data": "data"; "loading": "loading"; }, {}, never, never, false, never>;
		}

lib/ngx-data-loader.component.d.ts

		@@ -1,6 +0,6 @@
		import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
		import { EventEmitter, TemplateRef } from '@angular/core';
		import { LoadingState, NgxLoadWithDirective } from 'ngx-load-with';
		import { Observable } from 'rxjs';
		import { LoadingState } from './loading-state.interface';
		import * as i0 from "@angular/core";
		export declare class NgxDataLoaderComponent<T = unknown> implements OnInit, OnChanges {
		export declare class NgxDataLoaderComponent<T = unknown> {
		loadedTemplate?: TemplateRef<unknown>;
		@@ -64,35 +64,9 @@ errorTemplate?: TemplateRef<unknown>;
		loadingStateChange: EventEmitter<LoadingState<T>>;
		loadingState$: Observable<LoadingState<T>>;
		private loadTriggerSource;
		private loadTrigger$;
		private cancelSource;
		private stateOverrideSource;
		private stop$;
		ngOnInit(): void;
		ngOnChanges(changes: SimpleChanges): void;
		/**
		* Resets the loading state and calls `loadFn`.
		*/
		loader: NgxLoadWithDirective<T>;
		setData(data: T): void;
		setError(error: Error): void;
		reload(): void;
		/**
		* Cancels `loadFn`. Loading state will remain unchanged.
		*/
		cancel(): void;
		/**
		* Updates the loading state as if the passed data were loaded through `loadFn`.
		*/
		setData(data: T): void;
		/**
		* Updates the loading state as if the passed error were thrown by `loadFn`.
		*/
		setError(error: Error): void;
		private getLoadingState;
		private getLoadingStateUpdates;
		private getResultStateUpdates;
		private getLoadResult;
		private onError;
		private getInitialState;
		private getDebouncedLoadTrigger;
		static ɵfac: i0.ɵɵFactoryDeclaration<NgxDataLoaderComponent<any>, never>;
		static ɵcmp: i0.ɵɵComponentDeclaration<NgxDataLoaderComponent<any>, "ngx-data-loader", never, { "loadFn": "loadFn"; "loadFnArgs": "loadFnArgs"; "initialData": "initialData"; "debounceTime": "debounceTime"; "showStaleData": "showStaleData"; "loadingTemplateDelay": "loadingTemplateDelay"; }, { "dataLoaded": "dataLoaded"; "loadAttemptFailed": "loadAttemptFailed"; "loadAttemptFinished": "loadAttemptFinished"; "loadAttemptStarted": "loadAttemptStarted"; "loadingStateChange": "loadingStateChange"; }, ["loadedTemplate", "errorTemplate", "loadingTemplate"], never, false, never>;
		}

lib/ngx-data-loader.module.d.ts

		@@ -6,8 +6,8 @@ import * as i0 from "@angular/core";
		import * as i4 from "./loaded/loaded.component";
		import * as i5 from "./loading-state-template.pipe";
		import * as i6 from "@angular/common";
		import * as i5 from "@angular/common";
		import * as i6 from "ngx-load-with";
		export declare class NgxDataLoaderModule {
		static ɵfac: i0.ɵɵFactoryDeclaration<NgxDataLoaderModule, never>;
		static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDataLoaderModule, [typeof i1.NgxDataLoaderComponent, typeof i2.LoadingComponent, typeof i3.ErrorComponent, typeof i4.LoadedComponent, typeof i5.LoadingStateTemplatePipe], [typeof i6.CommonModule], [typeof i1.NgxDataLoaderComponent]>;
		static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDataLoaderModule, [typeof i1.NgxDataLoaderComponent, typeof i2.LoadingComponent, typeof i3.ErrorComponent, typeof i4.LoadedComponent], [typeof i5.CommonModule, typeof i6.NgxLoadWithModule], [typeof i1.NgxDataLoaderComponent]>;
		static ɵinj: i0.ɵɵInjectorDeclaration<NgxDataLoaderModule>;
		}

package.json

		{
		"name": "ngx-data-loader",
		"version": "7.1.3",
		"version": "8.0.0-beta.1",
		"peerDependencies": {
		@@ -5,0 +5,0 @@ "@angular/common": ">=15.0.0",

README.md

		# NgxDataLoader

		Simplify async data loading in Angular with NgxDataLoaderComponent.
		Lightweight, beginner-friendly Angular component that simplifies asynchronous data loading.

		@@ -15,19 +15,22 @@ [![Build status](https://img.shields.io/github/actions/workflow/status/rensjaspers/ngx-data-loader/main.yml?branch=main)](https://github.com/rensjaspers/ngx-data-loader/actions/workflows/main.yml)

		`NgxDataLoaderComponent` streamlines asynchronous data loading in Angular by abstracting away tasks such as error handling, cancel/reload strategies,
		Observable (un)subscriptions, and template display logic.
		NgxDataLoader is an Angular library designed to streamline asynchronous data loading. Its `NgxDataLoaderComponent` delivers a hassle-free experience by taking care of observable unsubscription / memory leaks, tracking loading states, managing error handling, and ensuring the correct template displays at the right time.

		To use the component, provide a `loadFn` that returns an `Observable` of the data, along with optional templates for each loading phase.
		The component will then automatically handle the loading logic and display the appropriate template.
		## Key Features

		A noteworthy feature of `NgxDataLoaderComponent` is its ability to process dynamic arguments via `loadFnArgs`. This feature permits
		dynamic arguments to be passed into `loadFn`, and whenever the `loadFnArgs` input value changes, `loadFn` is executed with the new arguments.
		This simplifies data loading based on route parameters or input field values.
		1. NgxDataLoaderComponent: This component accepts a `loadFn` function that returns an Observable. It automatically initiates data loading, relieving you from this task.

		## Features
		2. Loading and Error Templates: Optionally, you can add loading and error templates simply by nesting them inside the `ngx-data-loader` component. These templates will be displayed automatically based on the current state.

		- 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]
		3. Reload Method: NgxDataLoaderComponent exposes a `reload` method, enabling you to refresh the data as needed.

		4. Automatic Cleanup: When the component gets destroyed, the loading operation is cancelled automatically, preventing potential memory leaks.

		5. Dynamic Arguments: With the component's `loadFnArgs` input, you can pass arguments to the load function. Any changes to these arguments trigger an automatic reload, making it simple to load data based on dynamic values, like a route's ID parameter.

		## Benefits

		NgxDataLoader has been designed with simplicity and efficiency in mind. By abstracting away complex RxJS operations, it presents a more beginner-friendly approach to managing asynchronous data loading in Angular applications.

		In essence, NgxDataLoader helps you focus more on developing your application's core functionality and less on managing state and error handling, resulting in cleaner and more readable code.

		## Demo
		@@ -90,2 +93,18 @@

		### Reloading data:

		```html
		<!-- 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:
		@@ -92,0 +111,0 @@

esm2020/lib/loading-state-template.pipe.mjs

esm2020/lib/loading-state.interface.mjs

lib/loading-state-template.pipe.d.ts

lib/loading-state.interface.d.ts

esm2020/lib/error/error.component.mjs