{"id":13406720,"url":"https://github.com/johannesjo/angular2-promise-buttons","last_synced_at":"2025-03-14T11:30:39.868Z","repository":{"id":20733680,"uuid":"87560266","full_name":"johannesjo/angular2-promise-buttons","owner":"johannesjo","description":"Chilled loading buttons for angular2","archived":false,"fork":false,"pushed_at":"2023-12-01T14:27:56.000Z","size":8443,"stargazers_count":86,"open_issues_count":11,"forks_count":28,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T16:41:49.108Z","etag":null,"topics":["angular2","angular2-component","button","promise"],"latest_commit_sha":null,"homepage":"https://johannesjo.github.io/angular2-promise-buttons/#demo","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johannesjo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["johannesjo"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-04-07T15:24:56.000Z","updated_at":"2024-07-03T20:35:35.000Z","dependencies_parsed_at":"2024-01-18T23:05:34.908Z","dependency_job_id":"32519b68-3b6f-4762-bba6-121452ae9d68","html_url":"https://github.com/johannesjo/angular2-promise-buttons","commit_stats":{"total_commits":272,"total_committers":13,"mean_commits":"20.923076923076923","dds":"0.30147058823529416","last_synced_commit":"823b577808683954317b57841cd6bdfd154f7c29"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fangular2-promise-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fangular2-promise-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fangular2-promise-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannesjo%2Fangular2-promise-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johannesjo","download_url":"https://codeload.github.com/johannesjo/angular2-promise-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243451610,"owners_count":20293168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","angular2-component","button","promise"],"created_at":"2024-07-30T19:02:37.510Z","updated_at":"2025-03-14T11:30:39.853Z","avatar_url":"https://github.com/johannesjo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/johannesjo"],"categories":["TypeScript","Table of contents","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Third Party Components","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"logo.png\"\u003e\u003c/p\u003e\n          \n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://badge.fury.io/js/angular2-promise-buttons\"\u003e\n        \u003cimg src=\"https://camo.githubusercontent.com/5e39de25cca817826da9e93cdce01f16bc499695/68747470733a2f2f62616467652e667572792e696f2f6a732f616e67756c6172322d70726f6d6973652d627574746f6e732e737667\"\n             alt=\"npm version\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://travis-ci.org/johannesjo/angular2-promise-buttons?branch=master\"\u003e\n        \u003cimg src=\"https://camo.githubusercontent.com/849a28d2647af8a0fe2a8d47b860d638f5421948/68747470733a2f2f7472617669732d63692e6f72672f6a6f68616e6e65736a6f2f616e67756c6172322d70726f6d6973652d627574746f6e732e737667\"\n             alt=\"Build Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://coveralls.io/github/johannesjo/angular2-promise-buttons?branch=master\"\u003e\n        \u003cimg src=\"https://camo.githubusercontent.com/80cb53bf16882ebc70866dffd299edfa741b26e9/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f6a6f68616e6e65736a6f2f616e67756c6172322d70726f6d6973652d627574746f6e732f62616467652e7376673f6272616e63683d6d6173746572\"\n             alt=\"Coverage Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://lbesson.mit-license.org\"\u003e\n        \u003cimg alt=\"MIT license\"\n             src=\"https://camo.githubusercontent.com/311762166ef25238116d3cadd22fcb6091edab98/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\n*angular2-promise-buttons* is a simple module that let's you add a loading indicator to a button of your choice.  Check out the [demo](http://johannesjo.github.io/angular2-promise-buttons/#demo)!\n\n[Bug-reports or feature request](https://github.com/johannesjo/angular2-promise-buttons/issues) as well as any other kind of **feedback is highly welcome!**\n\n## Getting started\nInstall it via npm:\n```\nnpm install angular2-promise-buttons -S\n```\n\nAnd add it as a dependency to your main module\n```typescript\nimport {Angular2PromiseButtonModule} from 'angular2-promise-buttons';\n\n@NgModule({\n  imports: [\n    Angular2PromiseButtonModule.forRoot(),\n  ],\n})\nexport class MainAppModule {\n}\n```\nUsing the buttons is easy. Just pass a promise to the directive:\n```html\n\u003cbutton (click)=\"someAction()\" \n   [promiseBtn]=\"promiseSetBySomeAction\"\u003eClick me to spin!\u003c/button\u003e\n```\n```typescript\nexport class SomeComponent {\n    // some example async action, but this works with any promise\n    someAction(){\n      this.promiseSetBySomeAction = new Promise((resolve, reject) =\u003e {\n        setTimeout(resolve, 2000);\n      });\n    }\n}\n\n```\n\n## Styling the button\nTo give you maximum flexibility there are no base styles coming with the directive, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css to your global stylesheet.\n\n**Ressources:**\n* http://cssload.net/\n* http://projects.lukehaas.me/css-loaders/\n* http://tobiasahlin.com/spinkit/\n\nThere are selectors you can use to style. There is the `.is-loading` class on the button, which is set, when the promise is pending and there is the `\u003cspan class=\"btn-spinner\"\u003e\u003c/span\u003e` element inside the button.\n\n\n## Configuration\nConfiguration is done via the forRoot method of the promise button module:\n```typescript\nimport {Angular2PromiseButtonModule} from 'angular2-promise-buttons';\n\n@NgModule({\n  imports: [\n    Angular2PromiseButtonModule\n      .forRoot({\n        // your custom config goes here\n        spinnerTpl: '\u003cspan class=\"btn-spinner\"\u003e\u003c/span\u003e',\n        // disable buttons when promise is pending\n        disableBtn: true,\n        // the class used to indicate a pending promise\n        btnLoadingClass: 'is-loading',\n        // only disable and show is-loading class for clicked button, \n        // even when they share the same promise\n        handleCurrentBtnOnly: false,\n      }),\n  ],\n})\nexport class MainAppModule {\n}\n```\n\n## Using observables\nWhen you're using the module with observables make sure to pass a subscription to the directive rather than an observable directly.\n```typescript\nconst FAKE_FACTORY = {\n  initObservable: (): Observable\u003cnumber\u003e =\u003e {\n    return new Observable(observer =\u003e {\n      setTimeout(() =\u003e {\n        observer.complete();\n      }, 4000);\n    });\n  } \n};\n\n// DO:\nconst observable = FAKE_FACTORY.initObservable();\nthis.passedToDirective = observable.subscribe(\n// ...\n);\n  \n// DON'T DO:\nconst observable = FAKE_FACTORY.initObservable();\nthis.passedToDirective = observable;\n\n```\n\n## Using booleans\nIs now also possible.\n```html\n\u003cbutton (click)=\"someAction()\" \n   [promiseBtn]=\"isShowBoolean\"\u003eClick!\u003c/button\u003e\n```\n## Contributing\nContribution guidelines: [CONTRIBUTING.md](https://github.com/johannesjo/angular2-promise-buttons/blob/master/CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannesjo%2Fangular2-promise-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohannesjo%2Fangular2-promise-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannesjo%2Fangular2-promise-buttons/lists"}