@4soft/ngxs-action-time-plugin

NgxsActionTimePlugin

An Ngxs-Plugin that provides a decorator to indicate if one or more actions are still running.

usage

Install npm i @4soft/ngxs-action-time-plugin

Initialize in app.config.ts:

import { ActionTimePluginModule } from '@4soft/ngxs-action-time-plugin';
export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(NgxsModule.forRoot([SomeState])),
    importProvidersFrom(ActionTimePluginModule.forRoot()), // here
    ...
  ]
};

Use in component (loading$ shall be true as long as the Action Load is running):

import { Running } from '@4soft/ngxs-action-time-plugin';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe],
  template: `@if (loading$ | async) { <div class="loading-spinner"></div> }`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  @Running([SomeActions.Load, SomeActions.Save]) public readonly loading$!: Observable<boolean>;
}

Development

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build:lib to build the library. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Jest.

Further help

To get more help on this project contact 4soft.