Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
ngx-data-loader
Advanced tools
Async data container component for Angular 14+.
Most async data loading is done the same way: show a loading indicator while the data is loading, then show the data when it's loaded, or show an error message or a retry button if the data failed to load.
The NgxDataLoaderComponent
makes this easy. You only need to provide a getDataFn
that returns a Promise
or Observable
with the data, and the data
, skeleton
and error
templates. The component will handle all of the logic for you.
Features:
Install the package
npm install ngx-data-loader
Import the module
import { NgxDataLoaderModule } from 'ngx-data-loader';
@NgModule({
imports: [
NgxDataLoaderModule,
...
],
...
})
export class AppModule {}
Use the component
<!-- app.component.html -->
<ngx-data-loader [getDataFn]="getTodo">
<!-- showing once data has finished loading-->
<ng-template #dataTemplate let-todo>
Title: {{ todo.title }} <br />
Completed: {{ todo.completed ? 'Yes' : 'No' }}
</ng-template>
<!-- showing during initial loading phase -->
<ng-template #skeletonTemplate> Loading... </ng-template>
<!-- showing when error occurs -->
<ng-template #errorTemplate let-error let-retry="reloadFn">
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 | Local variables |
---|---|---|
@ContentChild('dataTemplate') dataTemplate?: TemplateRef<any> | Template to be displayed when the data is loaded. | $implicit: T : the resolved data.loading: boolean : whether the data is reloading (only available if showStaleData is set to true ). |
@ContentChild('skeletonTemplate) skeletonTemplate?: TemplateRef<any> | Template to be displayed when the data is loading. | (none) |
@ContentChild('errorTemplate') errorTemplate?: TemplateRef<any> | Template to be displayed when the data failed to load. | $implicit: Error<any> : the error object.reloadFn: () => void : can be called to trigger a retry. |
Name | Description |
---|---|
@Input() getDataFn: () => Observable<T> | Promise<T> | Function that returns a Promise or Observable of the data to be loaded. Called on init and on reload. |
@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 show stale data while reloading. Default: false |
@Input() skeletonDelay: number | Delay in milliseconds before showing the skeleton. Default: 0 |
@Input() timeout: number | Number of milliseconds to wait for getDataFn to emit before throwing an error. |
Name | Description |
---|---|
@Output() dataLoaded: EventEmitter<T> | Emitted when the data is loaded. |
@Output() loadAttemptStarted: EventEmitter<void> | Emitted when the data loading is started. |
@Output() error: EventEmitter<Error> | Emitted when the data failed to load. |
@Output() loadAttemptFinished: EventEmitter<void> | Emitted 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 | Resets the loading state and calls the getDataFn that you provided. |
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 31 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.