![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
ngx-data-loader
Advanced tools
Readme
Simplify async data loading in Angular with NgxDataLoaderComponent.
The NgxDataLoaderComponent
is an Angular component for easy async data loading. It handles error handling, cancel/reload strategies, and template display logic.
To use it, provide a loadFn
that returns an Observable
of the data, and optional templates for each loading phase.
The component also offers features such as auto retry and timeout configuration, server-side rendering with initialData
, and optimistic updates with setData
.
reload
and cancel
methodsinitialData
inputsetData
methodInstall the package
npm install ngx-data-loader
Import the module
import { NgxDataLoaderModule } from 'ngx-data-loader';
@NgModule({
imports: [
NgxDataLoaderModule,
...
],
...
})
export class AppModule {}
<!-- app.component.html -->
<ngx-data-loader [loadFn]="getTodo">
<ng-template #loading> Loading... </ng-template>
<ng-template #loaded let-todo>
Title: {{ todo.title }} <br />
Completed: {{ todo.completed ? 'Yes' : 'No' }}
</ng-template>
<ng-template #error let-error let-retry="retry">
Oops, something went wrong! Details: {{ error.message }}
<button (click)="retry()">Retry</button>
</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) {}
}
Name | Description | Template outlet context |
---|---|---|
@ContentChild('loaded') loadedTemplate?: TemplateRef<unknown> | Template to be displayed when the data has loaded. | $implicit: T : the resolved data.loading: boolean : whether the data is reloading (only available if showStaleData is set to true ). |
@ContentChild('loading') loadingTemplate?: TemplateRef<unknown> | Template to be displayed when the data is loading. | (none) |
@ContentChild('error') errorTemplate?: TemplateRef<unknown> | Template to be displayed when the data failed to load. | $implicit: Error<unknown> : the error object.retry: () => void : can be called to trigger a retry. |
Name | Description |
---|---|
@Input() loadFn!: () => Observable<T> | Function that returns an Observable of the data to be loaded. Called on init and on reload. |
@Input() loadFnArgs?: any | Arguments to pass to loadFn . Changes to this property will trigger a reload. |
@Input() initialData?: T | Data to be rendered on init. When set, loadFn will not be invoked on init. The loading state will be set to loaded . |
@Input() debounceTime: number | Number of milliseconds to debounce reloads. |
@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 keep displaying previously loaded data while reloading. Default: false |
@Input() loadingTemplateDelay: number | Delay in milliseconds before showing the loading template. Default: 0 |
@Input() timeout?: number | Number of milliseconds to wait for loadFn to emit before throwing an error. |
Name | Description |
---|---|
@Output() dataLoaded: EventEmitter<T> | Emits when the data is loaded. |
@Output() loadAttemptStarted: EventEmitter<void> | Emits when the data loading is started. |
@Output() loadAttemptFailed: EventEmitter<Error> | Emits when the data fails to load. |
@Output() loadAttemptFinished: EventEmitter<void> | Emits 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. |
Name | Description |
---|---|
reload: () => void | Resets the loading state and calls the loadFn that you provided. |
cancel: () => void | Cancels the pending loadFn and aborts any related http requests1. |
setData: (data: T) => void | Updates the loading state as if the passed data were loaded through loadFn . |
setError: (error: Error) => void | Updates the loading state as if the passed error were thrown by loadFn . |
interface LoadingState<T> {
loading: boolean;
loaded: boolean;
error?: Error;
data?: T;
}
The MIT License (MIT). Please see License File for more information.
FAQs
Lightweight, beginner-friendly Angular component that simplifies asynchronous data loading.
The npm package ngx-data-loader receives a total of 3 weekly downloads. As such, ngx-data-loader popularity was classified as not popular.
We found that ngx-data-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.