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"