inital version 0.0.1

README.md

@@ -1,27 +1,110 @@
-# NgxLoading
+# NGXS loading Plugin
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.8.
+<p align="center">
+  <a href="https://twitter.com/__bangash"><img src="https://img.shields.io/twitter/follow/__bangash.svg?label=Follow"/></a>
+</p>
 
-## Development server
+The plugin is created for adding class to UI element by Observaving user interaction to application.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Reasons to Use This Plugin
 
-## Code scaffolding
+Most of the time we are importing so many things to show loader, disable the Ui element and like the common one is creating a boolean state in component
+to check for action status, due to this plugin, we can easily handle by using [angular custom directive](https://angular.io/guide/attribute-directives), we can do the following things:
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### We adding `CSS` class to the UI element to define the status of the action.
 
-## Build
+- on action dispatch we adding `active` class.
+- on action success we adding `success` class.
+- on action throw error we adding `error` class.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+### Disable the UI element.
 
-## Running unit tests
+when action is dispatch the UI element is disabled so plugin prevents a double click on the UI element and enables once action status becomes success or error..
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+**_Note_**: you need to adding CSS against these classes, where user know button is press.
 
-## Running end-to-end tests
+## Installation
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run the following code in your terminal:
 
-## Further help
+```
+yarn add ngx-loading-plugin
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+or if you are using npm:
+
+```
+npm install ngx-loading-plugin
+```
+
+## Usage
+
+### Setup Before Initial Use
+
+Import `NgxLoadingPluginModule` into your root module like:
+
+```TS
+import { NgxLoadingPluginModule } from 'ngx-loading-plugin';
+
+@NgModule({
+  imports: [
+    NgxLoadingPluginModule.forRoot()
+  ]
+})
+export class AppModule {}
+```
+
+> we can pass config object to `forRoot` to change css class name.
+
+```TS
+  NgxLoadingPluginModule.forRoot({
+    cssClassName: {
+      active: 'focus',
+      success: 'done',
+      error: 'error'
+    }
+  })
+```
+
+### Call a client function.
+
+In `call function` we passing a function to the directive. the function should return observable. you can see the following example.
+
+loading.component.ts
+
+```TS
+export class LoadingComponent {
+  constructor(private store: Store) {}
+
+  onSubmit(): Observable<any> {
+    const { email, password } = this.form.value;
+    return this.httpRequest(email, password).pipe(
+      tap((resp) => {
+        /* here your code on success */
+        alert(`${JSON.stringify(resp)}`);
+      }), catchError((err) => {
+        alert(err);
+        /* here your code on error */
+        return throwError(err);
+      }));
+  }
+}
+```
+
+here `onSubmit` returning obserable and than we pass these function to directive in the current class context.
+
+```html
+<input type="submit" value="Submit" class="button" [ngxLoading]="onSubmit.bind(this)">
+  Submit
+</button>
+```
+
+here 'bind' reserve the context of the current component. and send copy of function to the directive.
+
+![button loading](./asset/actions.gif)
+
+### License and copy right
+
+&copy; Shahid Ahmad
+
+License under the [MIT License](LICENSE).

package.json

@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "copy": "mv ./README.md ./dist/ngx-loading-plugin"
   },
   "private": true,
   "dependencies": {
@@ -45,4 +46,4 @@
     "tslint": "~6.1.0",
     "typescript": "~3.9.5"
   }
-}
+}

projects/ngx-loading-plugin/README.md

@@ -1,24 +1,108 @@
-# NgxLoadingPlugin
+# NGXS loading Plugin
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.14.
+<p align="center">
+  <a href="https://twitter.com/__bangash"><img src="https://img.shields.io/twitter/follow/__bangash.svg?label=Follow"/></a>
+</p>
 
-## Code scaffolding
+The plugin is created for adding class to UI element by Observaving user interaction to application.
 
-Run `ng generate component component-name --project ngx-loading-plugin` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-loading-plugin`.
-> Note: Don't forget to add `--project ngx-loading-plugin` or else it will be added to the default project in your `angular.json` file. 
+## Reasons to Use This Plugin
 
-## Build
+Most of the time we are importing so many things to show loader, disable the Ui element and like the common one is creating a boolean state in component
+to check for action status, due to this plugin, we can easily handle by using [angular custom directive](https://angular.io/guide/attribute-directives), we can do the following things:
 
-Run `ng build ngx-loading-plugin` to build the project. The build artifacts will be stored in the `dist/` directory.
+### We adding `CSS` class to the UI element to define the status of the action.
 
-## Publishing
+- on action dispatch we adding `active` class.
+- on action success we adding `success` class.
+- on action throw error we adding `error` class.
 
-After building your library with `ng build ngx-loading-plugin`, go to the dist folder `cd dist/ngx-loading-plugin` and run `npm publish`.
+### Disable the UI element.
 
-## Running unit tests
+when action is dispatch the UI element is disabled so plugin prevents a double click on the UI element and enables once action status becomes success or error..
 
-Run `ng test ngx-loading-plugin` to execute the unit tests via [Karma](https://karma-runner.github.io).
+**_Note_**: you need to adding CSS against these classes, where user know button is press.
 
-## Further help
+## Installation
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Run the following code in your terminal:
+
+```
+yarn add ngx-loading-plugin
+```
+
+or if you are using npm:
+
+```
+npm install ngx-loading-plugin
+```
+
+## Usage
+
+### Setup Before Initial Use
+
+Import `NgxLoadingPluginModule` into your root module like:
+
+```TS
+import { NgxLoadingPluginModule } from 'ngx-loading-plugin';
+
+@NgModule({
+  imports: [
+    NgxLoadingPluginModule.forRoot()
+  ]
+})
+export class AppModule {}
+```
+
+> we can pass config object to `forRoot` to change css class name.
+
+```TS
+  NgxLoadingPluginModule.forRoot({
+    cssClassName: {
+      active: 'focus',
+      success: 'done',
+      error: 'error'
+    }
+  })
+```
+
+### Call a client function.
+
+In `call function` we passing a function to the directive. the function should return observable. you can see the following example.
+
+loading.component.ts
+
+```TS
+export class LoadingComponent {
+  constructor(private store: Store) {}
+
+  onSubmit(): Observable<any> {
+    const { email, password } = this.form.value;
+    return this.httpRequest(email, password).pipe(
+      tap((resp) => {
+        /* here your code on success */
+        alert(`${JSON.stringify(resp)}`);
+      }), catchError((err) => {
+        alert(err);
+        /* here your code on error */
+        return throwError(err);
+      }));
+  }
+}
+```
+
+here `onSubmit` returning obserable and than we pass these function to directive in the current class context.
+
+```html
+<input type="submit" value="Submit" class="button" [ngxLoading]="onSubmit.bind(this)">
+  Submit
+</button>
+```
+
+here 'bind' reserve the context of the current component. and send copy of function to the directive.
+
+### License and copy right
+
+&copy; Shahid Ahmad
+
+License under the [MIT License](LICENSE).

projects/ngx-loading-plugin/package.json

@@ -2,8 +2,7 @@
   "name": "ngx-loading-plugin",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^10.0.14",
-    "@angular/core": "^10.0.14"
+    "@angular/core": ">=5.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"