diff --git a/README.md b/README.md
index aba54cc..d1d05a8 100644
--- a/README.md
+++ b/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.
+
+
+
-## 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 {
+ 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
+
+ Submit
+
+```
+
+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
+
+© Shahid Ahmad
+
+License under the [MIT License](LICENSE).
diff --git a/asset/actions.gif b/asset/actions.gif
new file mode 100644
index 0000000..94275b5
Binary files /dev/null and b/asset/actions.gif differ
diff --git a/package.json b/package.json
index 9eecbb7..1aefba8 100644
--- a/package.json
+++ b/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"
}
-}
+}
\ No newline at end of file
diff --git a/projects/ngx-loading-plugin/README.md b/projects/ngx-loading-plugin/README.md
index c11308c..665c43a 100644
--- a/projects/ngx-loading-plugin/README.md
+++ b/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.
+
+
+
-## 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 {
+ 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
+
+ Submit
+
+```
+
+here 'bind' reserve the context of the current component. and send copy of function to the directive.
+
+### License and copy right
+
+© Shahid Ahmad
+
+License under the [MIT License](LICENSE).
diff --git a/projects/ngx-loading-plugin/package.json b/projects/ngx-loading-plugin/package.json
index 203e36b..073ceec 100644
--- a/projects/ngx-loading-plugin/package.json
+++ b/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"