{"id":15024637,"url":"https://github.com/thecoderdream/ngx-async-pipe-with-status","last_synced_at":"2025-04-12T06:41:41.369Z","repository":{"id":167260596,"uuid":"642856752","full_name":"TheCoderDream/ngx-async-pipe-with-status","owner":"TheCoderDream","description":"Async pipe and directive with status for Angular","archived":false,"fork":false,"pushed_at":"2023-05-21T12:37:13.000Z","size":128,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T02:03:42.945Z","etag":null,"topics":["angular","angular-directive","angular-pipe","angular2","async","asynchronous-programming","javascript","reactive","reactive-programming","rxjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-async-with-status","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheCoderDream.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-19T13:54:27.000Z","updated_at":"2023-08-18T15:23:44.000Z","dependencies_parsed_at":"2023-05-23T02:15:31.241Z","dependency_job_id":null,"html_url":"https://github.com/TheCoderDream/ngx-async-pipe-with-status","commit_stats":null,"previous_names":["thecoderdream/ngx-async-pipe-with-status"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-async-pipe-with-status","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-async-pipe-with-status/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-async-pipe-with-status/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-async-pipe-with-status/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheCoderDream","download_url":"https://codeload.github.com/TheCoderDream/ngx-async-pipe-with-status/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530610,"owners_count":21119591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-directive","angular-pipe","angular2","async","asynchronous-programming","javascript","reactive","reactive-programming","rxjs","typescript"],"created_at":"2024-09-24T20:00:40.475Z","updated_at":"2025-04-12T06:41:41.338Z","avatar_url":"https://github.com/TheCoderDream.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-async-with-status\n\nThe `ngx-async-with-status` library provides two powerful tools for handling and displaying the status of asynchronous data in Angular applications:\nthe `asyncWithStatus` directive and the `AsyncWithStatusPipe`.\nThese tools enable you to provide visual feedback to users during data loading and error states, and simplify error handling and state management in your templates.\n\n## Features\n* Works seamlessly within Angular applications.\n* Improves the user experience by providing visual feedback during data loading and error states.\n* Provides explicit status handling for asynchronous data.\n* Allows displaying loading, error, no data, and loaded states in the template.\n* Supports better control over change detection.\n* Fully tested.\n* Handles multiple subscriptions to different observables.\n* Properly unsubscribes from the observable to avoid memory leaks.\n* Simplifies error handling by displaying relevant error messages to the user.\n* Ensures up-to-date rendering of the template with the latest data changes.\n\n## Dependencies\nsupports Angular version 12.x and above.\n\n| ngx-async-with-status | Angular |\n|-----------------------|---------|\n| 1.0.3                 | =\u003e 12.x |\n\n## Installation\n\n```bash\nnpm install ngx-async-with-status --save\n````\n\n````ts\nimport { NgxAsyncWithStatusModule } from 'ngx-async-with-status';\n\n@NgModule({\n  declarations: [\n    // Your components and directives\n  ],\n  imports: [\n    // Other module imports\n    NgxAsyncWithStatusModule\n  ],\n  // Other module configurations\n})\nexport class YourModule { }\n````\n\n## asyncWithStatus Directive\nThe `asyncWithStatus` directive is an Angular directive that tracks the state of an observable value and renders different structural directives based on its state.\nIt provides a convenient way to handle asynchronous operations and display loading indicators, success messages, error messages, and other relevant UI components.\n\n## Usage\nTo use the asyncWithStatus directive, add it as an attribute directive on an HTML element and bind an observable value to it.\nThen, use the structural directives provided by the asyncWithStatus directive to conditionally render content based on the state of the observable.\n\n````ts\n@Component({\n  selector: 'some-component',\n  templateUrl: './some-component.component.html',\n})\nclass SomeComponent {\n  public data$ = of({ title: 'test' }).pipe(delay(1000));\n  public emptyData$ = of([]).pipe(delay(1000));\n}\n````\n\n````html\n\u003cdiv [asyncWithStatus]=\"data$\"\u003e\n    \u003cdiv *isLoading\u003e\n        loading.........\n    \u003c/div\u003e\n    \u003cdiv *isLoaded=\"let value\"\u003e\n        {{value?.title}}\n    \u003c/div\u003e\n    \u003cdiv *error=\"let error\"\u003e\n        {{error.message}}\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv [asyncWithStatus]=\"emptyData$\"\u003e\n    \u003cdiv *isLoading\u003e\n        loading.........\n    \u003c/div\u003e\n    \u003cdiv *isLoadedWithData=\"let value\"\u003e\n        Loaded\n    \u003c/div\u003e\n    \u003cdiv *isLoadedWithoutData\u003e\n        No Data Available\n    \u003c/div\u003e\n    \u003cdiv *error=\"let error\"\u003e\n        {{error.message}}\n    \u003c/div\u003e\n\u003c/div\u003e\n````\n\n## API\n\n### Inputs\n* asyncWithStatus: Binds an observable value to the directive for tracking its state.\n\n## Structural Directives\nThe following structural directives are used within the asyncWithStatus directive to conditionally render content based on the state of the observable.\n\n* **isLoading**: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.\n\n* **isLoaded**: Renders the content when the observable is successfully loaded. Use this directive to display the main content that should be shown when the data is available.\n\n* **error**: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.\n\n* **isLoadedWithData**: Renders the content when the observable is loaded with data. Use this directive to display content that requires access to the loaded data. You can access the data using the let-data directive syntax.\n\n* **isLoadedWithoutData**: Renders the content when the observable is loaded without data. Use this\n\n## AsyncWithStatusPipe\nThe `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in async pipe.\nIt allows you to handle and display the status of asynchronous data loading, such as loading state, error state, and loaded state, all within the template.\n\n## Usage\n\nUse the asyncWithStatus pipe in your template to handle and display the status of asynchronous data:\nThe `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in `async` pipe.\nIt allows you to handle and display the status of asynchronous data loading, such as loading state, error state, and loaded state, all within the template.\n````ts\n@Component({\n  selector: 'some-component',\n  templateUrl: './some-component.component.html',\n})\nclass SomeComponent {\n  public data$ = of({ title: 'test' }).pipe(delay(1000));\n  public emptyData$ = of([]).pipe(delay(1000));\n}\n````\n````html\n\u003cdiv *ngIf=\"data$ | asyncWithStatus as data\"\u003e\n  \u003cdiv *ngIf=\"data.isLoading\" class=\"loading\"\u003eLoading...\u003c/div\u003e\n  \u003cdiv *ngIf=\"data.error\" class=\"error\"\u003eError: {{ data.error?.message }}\u003c/div\u003e\n  \u003cdiv *ngIf=\"data.loaded\" class=\"loaded\"\u003e\n    {{ data.value?.title }}\n  \u003c/div\u003e\n\u003c/div\u003e\n````\n\n```html\n\u003cdiv *ngIf=\"emptyData$ | asyncWithStatus as data\"\u003e\n    \u003cdiv *ngIf=\"data.isLoading\" class=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003cdiv *ngIf=\"data.error\" class=\"error\"\u003eError: {{ data.error?.message }}\u003c/div\u003e\n    \u003cdiv *ngIf=\"data.isLoadedWithData\" class=\"loaded\"\u003e\n        \u003cul\u003e\n            \u003cli *ngFor=\"let val of data.value\"\u003e\n                {{val}}\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv *ngIf=\"data.isLoadedWithoutData\" class=\"loaded\"\u003e\n        No Data\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nThe asyncWithStatus pipe takes an observable as input and returns a RequestState object, which contains the current state of the asynchronous data.\nYou can then use the properties of the RequestState object (isLoading, error, noData, isLoaded, value) to handle and display the appropriate content in your template.\n\n## State Definitions\n* **error**: when observable throws error. It could be due to various reasons such as network issues, server errors, or invalid data. In this state, the application typically displays an error message or a fallback UI to notify the user about the problem.\n* **isLoading**: This state indicates that the application is currently fetching or loading data from a server or performing some asynchronous operation.\n* **isLoaded**: Data has been successfully loaded and ready for display.\n* **isLoadedWithData**: Indicates that the data has been successfully loaded with non-empty data.\n* **isLoadedWithoutData**: Indicates that the data has been successfully loaded with empty data.\n* **noData**:  null, undefined, empty array, object and string represent the absence of data.\n\n## Advantages over built-in Angular async pipe\n### The AsyncWithStatusPipe provides the following advantages over the Angular async pipe:\n\n* **Explicit status handling**: With the AsyncWithStatusPipe, you have explicit access to the loading, error, and loaded states of the asynchronous data. This allows you to handle each state individually and provide appropriate UI feedback to the user.\n\n* **Easier error handling**: The AsyncWithStatusPipe automatically catches errors thrown by the observable and includes the error details in the RequestState object. This simplifies error handling and allows you to display relevant error messages to the user.\n\n* **Better control over change** detection: Change detection is only triggered whenever the asynchronous data state changes. This ensures that your template is always up to date with the latest data.\n\n## See more examples in stackblitz\n\nhttps://stackblitz.com/edit/ngx-async-with-status?file=src%2Fmain.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecoderdream%2Fngx-async-pipe-with-status","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthecoderdream%2Fngx-async-pipe-with-status","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecoderdream%2Fngx-async-pipe-with-status/lists"}