@ngxs-labs/actions-executing
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.9 • Public • Published

    master npm version Coverage Status


    NGXS Actions Executing

    Demo

    Link

    Description

    This plugin allows you to easily know if an action is being executed and control UI elements or control flow of your code to execute. The most common scenarios for using this plugin are to display loading spinner or disable a button while an action is executing.

    Quick start

    Install the plugin:

    • npm
    npm install --save @ngxs-labs/actions-executing
    • yarn
    yarn add @ngxs-labs/actions-executing

    Next, include it in you app.module.ts

    //...
    import { NgxsModule } from '@ngxs/store';
    import { NgxsActionsExecutingModule } from '@ngxs-labs/actions-executing';
    
    @NgModule({
        //...
        imports: [
            //...
            NgxsModule.forRoot([
                //... your states
            ]),
            NgxsActionsExecutingModule.forRoot()
        ]
        //...
    })
    export class AppModule {}

    To use it on your components you just need to include the following @Select()

    //...
    import { actionsExecuting, ActionsExecuting } from '@ngxs-labs/actions-executing';
    
    //...
    export class SingleComponent {
        @Select(actionsExecuting([MyAction])) myActionIsExecuting$: Observable<ActionsExecuting>;
    }

    then you can disable a button or display a loading indicator very easily

    <button [disabled]="myActionIsExecuting$ | async" (click)="doSomething()">
        My Action
    </button>
    
    <span *ngIf="myActionIsExecuting$ | async">
        Loading...
    </span>

    More examples

    actionsExecuting selector returns the type ActionsExecuting

    type ActionsExecuting = { [action: string]: number } | null;

    This allows you to know which actions and how many of them are being executed at any given time.

    You can also pass multiple actions to the selector and this way you'll receive updates when any of those actions are executing.

    @Select(actionsExecuting([Action1, Action2])) multipleActions$: Observable<ActionsExecuting>;

    Keywords

    none

    Install

    npm i @ngxs-labs/actions-executing

    DownloadsWeekly Downloads

    1,546

    Version

    0.1.9

    License

    MIT

    Unpacked Size

    82.3 kB

    Total Files

    23

    Last publish

    Collaborators

    • splincode
    • amcdnl
    • overthesanity
    • markwhitfeld
    • marcjulian
    • duffleit
    • janmalch
    • joaqcid