{"id":13808679,"url":"https://github.com/tiberiuzuld/angular-busy","last_synced_at":"2025-05-14T02:32:24.395Z","repository":{"id":12617246,"uuid":"72349475","full_name":"tiberiuzuld/angular-busy","owner":"tiberiuzuld","description":"Show busy/loading indicators on any element during a promise/Observable.","archived":false,"fork":true,"pushed_at":"2024-08-05T15:43:09.000Z","size":11218,"stargazers_count":23,"open_issues_count":1,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-15T01:33:06.903Z","etag":null,"topics":["angular5","angularjs","javascript","loading","loading-animations","mask","typescript"],"latest_commit_sha":null,"homepage":"https://tiberiuzuld.github.io/angular-busy","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"cgross/angular-busy","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiberiuzuld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-30T12:55:52.000Z","updated_at":"2024-08-05T15:40:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tiberiuzuld/angular-busy","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-busy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-busy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-busy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiberiuzuld%2Fangular-busy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiberiuzuld","download_url":"https://codeload.github.com/tiberiuzuld/angular-busy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273259,"owners_count":17448074,"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":["angular5","angularjs","javascript","loading","loading-animations","mask","typescript"],"created_at":"2024-08-04T01:01:49.045Z","updated_at":"2024-11-19T00:30:58.755Z","avatar_url":"https://github.com/tiberiuzuld.png","language":"TypeScript","readme":"# angular-busy2 [Live Demo](https://tiberiuzuld.github.io/angular-busy)\n\n[![npm version](https://badge.fury.io/js/angular-busy2.svg)](https://badge.fury.io/js/angular-busy2)\n![Node CI](https://github.com/tiberiuzuld/angular-busy/workflows/Node%20CI/badge.svg)\n[![downloads](https://img.shields.io/npm/dm/angular-busy2.svg)](https://www.npmjs.com/package/angular-busy2)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)\n\n\u003e Show busy/loading indicators on Observable, Subscription, Promise, Boolean, Number\n\n### For [AngularJS 1 branch 1.x](https://github.com/tiberiuzuld/angular-busy/tree/1.x)\n\n## Getting Started\n\nInstall with npm.\n\n```bash\nnpm install angular-busy2 --save\n```\n\nAdd `CgBusyModule` as a module dependency for your module.\n\nYou have to import it with `forRoot` in any module where you want to provide `CgBusyDefaults`.\n\nUsually you do that in your root module (`app.module`).\n\nIf you never import it with `forRoot` `CgBusyDefaults` will always be `undefined`.\n\n`forRoot` takes optional `CgBusyOptions` as parameter.\n\nFor every omitted option in the supplied `CgBusyOptions` the libraries default value will be used.\n\n```typescript\nimport { CgBusyModule } from 'angular-busy2';\n\n@NgModule({\n  imports: [\n    CgBusyModule.forRoot({\n      backdrop: true\n    }) //import it with .forRoot in your root module. provide some optional Options.\n  ]\n})\n```\n\nIn every shared module/sub module you should import `CgBusyModule` without `forRoot` unless you want to provide a\ndifferent instance of `CgBusyDefaults`\n\n### Standalone import directive\n\n```typescript\nimport { CgBusyDirective } from 'angular-busy2';\n\n@Component({\n  standalone: true,\n  imports: [CgBusyDirective],\n  // ...\n})\n\n// main.ts if you bootstrap application\nbootstrapApplication(AppComponent, {\n  providers: [\n    importProvidersFrom(CgBusyModule.forRoot())\n    // ...\n  ]\n}).catch(err =\u003e console.log(err));\n```\n\n## Options\n\nThe `[cgBusy]` directive expects any Observable, Subscription, Promise, Boolean, Number and optional `[cgBusyConfig]`\nconfiguration object.\n\nIn other words. You may do this:\n\n```html\n\n\u003cdiv [cgBusy]=\"promise\"\u003e\u003c/div\u003e\n```\n\nor this:\n\n```html\n\n\u003cdiv [cgBusy]=\"promise\"\n     [cgBusyConfig]=\"{templateRef: customTemplate, message:message, backdrop:backdrop, delay:delay, minDuration:minDuration}\"\u003e\u003c/div\u003e\n```\n\n* `promise` - Required. The promise/Observables (or array of promises/Observables) that will cause the busy indicator to\n  show. Also supports boolean and numbers (truthy values will show loading...)\n* `message` - Optional. Defaults to 'Please Wait...'. The message to show in the indicator. This value may be updated\n  while the promise is active. The indicator will reflect the updated values as they're changed.\n* `backdrop` - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.\n* `templateRef` - Optional. If provided, the given template will be shown in place of the default progress indicator\n  template.\n* `delay` - Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.\n* `minDuration` - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker.\n  Defaults to 0. Specified in milliseconds.\n* `wrapperClass` - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy\n  sign/animation. Defaults to `undefined`. Typically only useful if you wish to apply different positioning to the\n  animation.\n\n## Overriding Defaults\n\nThe default values for `message`, `backdrop`, `templateRef`, `delay`, and `minDuration` may all be overridden by\noverriding the `CgBusyDefaults`, like so:\n\n```typescript\nimport { CgBusyDefaults } from 'angular-busy2';\n\nclass AppComponent {\n  @ViewChild('customTemplate')\n  private customTemplateTpl: TemplateRef\u003cany\u003e;\n\n  constructor(private busyDefaults: CgBusyDefaults) {\n    this.busyDefaults.delay = 5000;\n  }\n\n  ngOnInit() {\n    this.busyDefaults.templateRef = this.customTemplateTpl;\n  }\n}\n```\n\n```html\n\n\u003cng-template #customTemplate let-options=\"options\"\u003e\n  \u003cdiv class=\"custom-template\"\u003e\n    \u003cdiv class=\"custom-message\" [innerHtml]=\"options.message\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ng-template\u003e\n```\n\nOnly the values you'd like overridden need to be specified.\n\n\u003e Fork from original angular-busy (cgBusy) https://github.com/cgross/angular-busy  \n","funding_links":["https://www.paypal.me/tiberiuzuld"],"categories":["Third Party Components"],"sub_categories":["Loaders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiberiuzuld%2Fangular-busy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiberiuzuld%2Fangular-busy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiberiuzuld%2Fangular-busy/lists"}