npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-async-with-status

v1.0.4

Published

Async pipe with status for Angular

Downloads

5

Readme

ngx-async-with-status

The ngx-async-with-status library provides two powerful tools for handling and displaying the status of asynchronous data in Angular applications: the asyncWithStatus directive and the AsyncWithStatusPipe. These 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.

Features

  • Works seamlessly within Angular applications.
  • Improves the user experience by providing visual feedback during data loading and error states.
  • Provides explicit status handling for asynchronous data.
  • Allows displaying loading, error, no data, and loaded states in the template.
  • Supports better control over change detection.
  • Fully tested.
  • Handles multiple subscriptions to different observables.
  • Properly unsubscribes from the observable to avoid memory leaks.
  • Simplifies error handling by displaying relevant error messages to the user.
  • Ensures up-to-date rendering of the template with the latest data changes.

Dependencies

supports Angular version 12.x and above.

| ngx-async-with-status | Angular | |-----------------------|---------| | 1.0.3 | => 12.x |

Installation

npm install ngx-async-with-status --save
import { NgxAsyncWithStatusModule } from 'ngx-async-with-status';

@NgModule({
  declarations: [
    // Your components and directives
  ],
  imports: [
    // Other module imports
    NgxAsyncWithStatusModule
  ],
  // Other module configurations
})
export class YourModule { }

asyncWithStatus Directive

The asyncWithStatus directive is an Angular directive that tracks the state of an observable value and renders different structural directives based on its state. It provides a convenient way to handle asynchronous operations and display loading indicators, success messages, error messages, and other relevant UI components.

Usage

To use the asyncWithStatus directive, add it as an attribute directive on an HTML element and bind an observable value to it. Then, use the structural directives provided by the asyncWithStatus directive to conditionally render content based on the state of the observable.

@Component({
  selector: 'some-component',
  templateUrl: './some-component.component.html',
})
class SomeComponent {
  public data$ = of({ title: 'test' }).pipe(delay(1000));
  public emptyData$ = of([]).pipe(delay(1000));
}
<div [asyncWithStatus]="data$">
    <div *isLoading>
        loading.........
    </div>
    <div *isLoaded="let value">
        {{value?.title}}
    </div>
    <div *error="let error">
        {{error.message}}
    </div>
</div>

<div [asyncWithStatus]="emptyData$">
    <div *isLoading>
        loading.........
    </div>
    <div *isLoadedWithData="let value">
        Loaded
    </div>
    <div *isLoadedWithoutData>
        No Data Available
    </div>
    <div *error="let error">
        {{error.message}}
    </div>
</div>

API

Inputs

  • asyncWithStatus: Binds an observable value to the directive for tracking its state.

Structural Directives

The following structural directives are used within the asyncWithStatus directive to conditionally render content based on the state of the observable.

  • isLoading: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.

  • 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.

  • error: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.

  • 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.

  • isLoadedWithoutData: Renders the content when the observable is loaded without data. Use this

AsyncWithStatusPipe

The AsyncWithStatusPipe is an Angular pipe that provides additional functionality over the built-in async pipe. It 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.

Usage

Use the asyncWithStatus pipe in your template to handle and display the status of asynchronous data: The AsyncWithStatusPipe is an Angular pipe that provides additional functionality over the built-in async pipe. It 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.

@Component({
    selector: 'some-component',
    templateUrl: './some-component.component.html',
})
class SomeComponent {
    public data$ = of({ title: 'test' }).pipe(delay(1000));
    public emptyData$ = of([]).pipe(delay(1000));
}
<div *ngIf="data$ | asyncWithStatus as data">
    <div *ngIf="data.isLoading" class="loading">Loading...</div>
    <div *ngIf="data.error" class="error">Error: {{ data.error?.message }}</div>
    <div *ngIf="data.loaded" class="loaded">
        {{ data.value?.title }}
    </div>
</div>
<div *ngIf="emptyData$ | asyncWithStatus as data">
    <div *ngIf="data.isLoading" class="loading">Loading...</div>
    <div *ngIf="data.error" class="error">Error: {{ data.error?.message }}</div>
    <div *ngIf="data.isLoadedWithData" class="loaded">
        <ul>
            <li *ngFor="let val of data.value">
                {{val}}
            </li>
        </ul>
    </div>
    <div *ngIf="data.isLoadedWithoutData" class="loaded">
        No Data
    </div>
</div>

The asyncWithStatus pipe takes an observable as input and returns a RequestState object, which contains the current state of the asynchronous data. You can then use the properties of the RequestState object (isLoading, error, noData, isLoaded, value) to handle and display the appropriate content in your template.

State Definitions

  • 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.
  • isLoading: This state indicates that the application is currently fetching or loading data from a server or performing some asynchronous operation.
  • isLoaded: Data has been successfully loaded and ready for display.
  • isLoadedWithData: Indicates that the data has been successfully loaded with non-empty data.
  • isLoadedWithoutData: Indicates that the data has been successfully loaded with empty data.
  • noData: null, undefined, empty array, object and string represent the absence of data.

Advantages over built-in Angular async pipe

The AsyncWithStatusPipe provides the following advantages over the Angular async pipe:

  • 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.

  • 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.

  • 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.

See more examples in stackblitz

https://stackblitz.com/edit/ngx-async-with-status?file=src%2Fmain.ts