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 in Angular 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 NgxDataLoader component makes this easy. You only need to provide a getDataFn
that returns an Observable
or Promise
with the data, and a dataTemplate
that renders the data.
The component will handle the rest.
View demo at https://ngx-data-loader.netlify.app
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">
<ng-template #dataTemplate let-todo>
Title: {{ todo.title }} <br />
Completed: {{ todo.completed ? 'Yes' : 'No' }}
</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 |
---|---|
@ContentChild('dataTemplate') dataTemplate?: TemplateRef<any> | Template to be displayed when the data is loaded. |
@ContentChild('skeletonTemplate) skeletonTemplate?: TemplateRef<any> | Template to be displayed when the data is loading. |
@ContentChild('errorTemplate') errorTemplate?: TemplateRef<any> | Template to be displayed when the data failed to load. |
Name | Description |
---|---|
@Input() getDataFn: () => Observable<T> | Promise<T> | Function that returns the data to be loaded. |
@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. Default: 30000 |
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. |
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.