{"id":13480804,"url":"https://github.com/devyumao/angular2-busy","last_synced_at":"2025-04-04T18:10:11.772Z","repository":{"id":57179497,"uuid":"59898064","full_name":"devyumao/angular2-busy","owner":"devyumao","description":"Show busy/loading indicators on any promise, or on any Observable's subscription.","archived":false,"fork":false,"pushed_at":"2017-10-02T17:40:42.000Z","size":1785,"stargazers_count":314,"open_issues_count":55,"forks_count":103,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T17:09:46.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://devyumao.github.io/angular2-busy/demo/asset/","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/devyumao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-28T14:20:57.000Z","updated_at":"2024-07-12T22:28:38.000Z","dependencies_parsed_at":"2022-09-09T19:00:14.876Z","dependency_job_id":null,"html_url":"https://github.com/devyumao/angular2-busy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devyumao%2Fangular2-busy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devyumao%2Fangular2-busy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devyumao%2Fangular2-busy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devyumao%2Fangular2-busy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devyumao","download_url":"https://codeload.github.com/devyumao/angular2-busy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226215,"owners_count":20904465,"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":[],"created_at":"2024-07-31T17:00:45.233Z","updated_at":"2025-04-04T18:10:11.755Z","avatar_url":"https://github.com/devyumao.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","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)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Loader"],"readme":"# Angular2-Busy\n\n[![npm version](https://img.shields.io/npm/v/angular2-busy.svg?style=flat-square)](https://www.npmjs.com/package/angular2-busy) [![Build Status](https://img.shields.io/travis/devyumao/angular2-busy/master.svg?style=flat-square)](https://travis-ci.org/devyumao/angular2-busy)\n\n**Angular 2 Busy** can show busy/loading indicators on any promise, or on any Observable's subscription.\n\n![demo](https://raw.githubusercontent.com/devyumao/devyumao.github.io/master/angular2-busy/img/demo.gif)\n\nRewritten from [angular-busy](https://github.com/cgross/angular-busy), and add some new features in terms of Angular 2.\n\n### Built with Angular 4.0.1\n\n## Demo\n\n[devyumao.github.io/angular2-busy/demo/asset/](http://devyumao.github.io/angular2-busy/demo/asset/)\n\n## Installation\n\n```shell\nnpm install --save angular2-busy\n```\n\n## Link CSS\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/node_modules/angular2-busy/build/style/busy.css\"\u003e\n```\n\n## Getting Started\n\nImport the `BusyModule` in your root application module:\n\n```typescript\nimport {NgModule} from '@angular/core';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\nimport {BusyModule} from 'angular2-busy';\n\n@NgModule({\n\timports: [\n    \t// ...\n        BrowserAnimationsModule,\n        BusyModule\n    ],\n\t// ...\n})\nexport class AppModule {}\n```\n\n\nReference your promise in the `ngBusy` directive:\n\n```typescript\nimport {Component, OnInit} from '@angular/core';\nimport {Http} from '@angular/http';\n\n@Component({\n    selector: 'some',\n    template: `\n        \u003cdiv [ngBusy]=\"busy\"\u003e\u003c/div\u003e\n    `\n})\nclass SomeComponent implements OnInit {\n    busy: Promise\u003cany\u003e;\n\n    constructor(private http: Http) {}\n\n    ngOnInit() {\n        this.busy = this.http.get('...').toPromise();\n    }\n}\n```\n\nMoreover, the subscription of an Observable is also supported:\n\n```typescript\n// ...\nimport {Subscription} from 'rxjs';\n\n// ...\nclass SomeComponent implements OnInit {\n    busy: Subscription;\n\n    // ...\n\n    ngOnInit() {\n        this.busy = this.http.get('...').subscribe();\n    }\n}\n```\n\n## Directive Syntax\n\nThe `ngBusy` directive expects a ***busy thing***, which means:\n- A promise\n- Or an Observable's subscription\n- Or an array of them\n- Or a configuration object\n\nIn other words, you may use flexible syntax:\n\n```html\n\u003c!-- Simple syntax --\u003e\n\u003cdiv [ngBusy]=\"busy\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- Collection syntax --\u003e\n\u003cdiv [ngBusy]=\"[busyA, busyB, busyC]\"\u003e\u003c/div\u003e\n```\n\n```html\n\u003c!-- Advanced syntax --\u003e\n\u003cdiv [ngBusy]=\"{busy: busy, message: 'Loading...', backdrop: false, delay: 200, minDuration: 600}\"\u003e\u003c/div\u003e\n```\n\n## Options\n\n| Option | Required | Default | Details |\n| ---- | ---- | ---- | ---- |\n| busy | Required | null | A busy thing (or an array of busy things) that will cause the loading indicator to show. |\n| message | Optional | 'Please wait...' | The message to show in the indicator which will reflect the updated values as they are changed. |\n| backdrop | Optional | true | A faded backdrop will be shown behind the indicator if true. |\n| template | Optional | A default template string | If provided, the custom template will be shown in place of the default indicatory template. The scope can be augmented with a `{{message}}` field containing the indicator message text. |\n| delay | Optional | 0 | The amount of time to wait until showing the indicator. Specified in milliseconds.\n| minDuration | Optional | 0 | The amount of time to keep the indicator showing even if the busy thing was completed quicker. Specified in milliseconds.|\n| wrapperClass | Optional | 'ng-busy' | The name(s) of the CSS classes to be applied to the wrapper element of the indicator. |\n\n\n## Overriding Defaults\n\nThe default values of options can be overriden by configuring the provider of the `BusyModule`.\n\nIn the root application module, you can do this:\n\n```typescript\nimport {NgModule} from '@angular/core';\nimport {BusyModule, BusyConfig} from 'angular2-busy';\n\n@NgModule({\n    imports: [\n    \t// ...\n        BusyModule.forRoot(\n        \tnew BusyConfig({\n            \tmessage: 'Don\\'t panic!',\n                backdrop: false,\n                template: '\u003cdiv\u003e{{message}}\u003c/div\u003e',\n                delay: 200,\n                minDuration: 600,\n                wrapperClass: 'my-class'\n            })\n        )\n    ],\n\t// ...\n})\nexport class AppModule\n```\n\n## FAQ\n\n### The indicator's position is not inside the `ngBusy` container\n\nYou may add `position: relative` style to your `ngBusy` container.\n\n### SystemJS Config?\n\nYou may need this in your `systemjs.config.js`:\n\n```javascript\n{\n    paths: {\n        'npm:': 'node_modules/'\n    },\n    map: {\n        // ...\n        'angular2-busy': 'npm:angular2-busy'\n    },\n    packages: {\n        // ...\n        'angular2-busy': {\n            main: './index.js',\n            defaultExtension: 'js'\n        }\n    }\n}\n```\n\n\n## TODO\n\n- Provide custom animations for the indicator\n\n- Unit \u0026 E2E test\n\n## Credits\n\nRewritten from [cgross](https://github.com/cgross)'s [angular-busy](https://github.com/cgross/angular-busy).\n\nInspired by [ajoslin](https://github.com/ajoslin)'s [angular-promise-tracker](https://github.com/ajoslin/angular-promise-tracker).\n\n## LICENSE\n\nThis project is licensed under the MIT license. See the [LICENSE](https://github.com/devyumao/angular2-busy/blob/master/LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevyumao%2Fangular2-busy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevyumao%2Fangular2-busy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevyumao%2Fangular2-busy/lists"}