{"id":24426254,"url":"https://github.com/michaeldoye/mat-progress-buttons","last_synced_at":"2025-04-06T04:16:25.486Z","repository":{"id":27594369,"uuid":"114533724","full_name":"michaeldoye/mat-progress-buttons","owner":"michaeldoye","description":"Very simple Angular6+ Material Design progress buttons","archived":false,"fork":false,"pushed_at":"2022-03-02T04:39:01.000Z","size":2181,"stargazers_count":110,"open_issues_count":9,"forks_count":53,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-15T02:24:02.241Z","etag":null,"topics":["angular","angular-material2","material-design","progress-button"],"latest_commit_sha":null,"homepage":"https://mat-progress-buttons.firebaseapp.com/","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/michaeldoye.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-12-17T12:19:25.000Z","updated_at":"2024-01-12T13:08:51.000Z","dependencies_parsed_at":"2022-08-07T13:00:40.198Z","dependency_job_id":null,"html_url":"https://github.com/michaeldoye/mat-progress-buttons","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeldoye%2Fmat-progress-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeldoye%2Fmat-progress-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeldoye%2Fmat-progress-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaeldoye%2Fmat-progress-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaeldoye","download_url":"https://codeload.github.com/michaeldoye/mat-progress-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430966,"owners_count":20937875,"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":["angular","angular-material2","material-design","progress-button"],"created_at":"2025-01-20T11:16:35.737Z","updated_at":"2025-04-06T04:16:25.378Z","avatar_url":"https://github.com/michaeldoye.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\" src=\"https://cdn.rawgit.com/michaeldoye/mat-progress-buttons/master/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# Anguar Material Design Progress Buttons\n\n[![npm version](https://badge.fury.io/js/mat-progress-buttons.svg)](https://badge.fury.io/js/mat-progress-buttons)\n[![Build Status](https://travis-ci.org/michaeldoye/mat-progress-buttons.svg?branch=master)](https://travis-ci.org/michaeldoye/mat-progress-buttons)\n[![dependency Status](https://david-dm.org/michaeldoye/mat-progress-buttons/status.svg)](https://david-dm.org/michaeldoye/mat-progress-buttons)\n[![devDependency Status](https://david-dm.org/michaeldoye/mat-progress-buttons/dev-status.svg?branch=master)](https://david-dm.org/michaeldoye/mat-progress-buttons#info=devDependencies)\n\n## Demo\n\nView all the directives in action at https://mat-progress-buttons.firebaseapp.com\n\nStackBlitz demo https://stackblitz.com/edit/mat-progress-buttons-demo\n## Dependencies\n* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0)\n* [Angular Material](https://material.angular.io/)\n\n## Installation\nInstall above dependencies via *npm*. \n\nNow install `mat-progress-buttons` via:\n```shell\nnpm install --save mat-progress-buttons\n```\n\n---\n##### SystemJS\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `mat-progress-buttons`:\n```js\nmap: {\n  'mat-progress-buttons': 'node_modules/mat-progress-buttons/bundles/mat-progress-buttons.umd.js',\n}\n```\n---\n\nOnce installed you need to import the main module:\n```js\nimport { MatProgressButtonsModule } from 'mat-progress-buttons';\n```\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` MatProgressButtonsModule .forRoot()`):\n```js\nimport { MatProgressButtonsModule } from 'mat-progress-buttons';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [MatProgressButtonsModule.forRoot(), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import ` MatProgressButtonsModule `:\n\n```js\nimport { MatProgressButtonsModule } from 'mat-progress-buttons';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [MatProgressButtonsModule, ...], \n})\nexport class OtherModule {\n}\n```\n\n## Usage\n\n### Spinner Button\n\n```js\nimport { Component } from '@angular/core';\nimport { MatProgressButtonOptions } from 'mat-progress-buttons';\n\n@Component({\n  selector: 'app-home',\n  template: '\u003cmat-spinner-button (btnClick)=\"btnClick()\" [options]=\"btnOpts\"\u003e\u003c/mat-spinner-button\u003e'\n})\nexport class SomeComponent {\n\n  // Button Options\n  btnOpts: MatProgressButtonOptions = {\n    active: false,\n    text: 'Stroked Button',\n    spinnerSize: 19,\n    raised: false,\n    stroked: true,\n    flat: false,\n    fab: false,\n    buttonColor: 'accent',\n    spinnerColor: 'accent',\n    fullWidth: false,\n    disabled: false,\n    mode: 'indeterminate',\n    customClass: 'some-class',\n    // add an icon to the button\n    buttonIcon: {\n      fontSet: 'fa',\n      fontIcon: 'fa-heart',\n      inline: true\n    }\n  };\n\n  // Click handler\n  btnClick(): void {\n    this.btnOpts.active = true;\n    setTimeout(() =\u003e {\n      this.btnOpts.active = false;\n    }, 3350);\n  }\n};\n```\n\n### Spinner button FAB\n\nYou can use the spinner button with a `mat-fab` with an icon. Both `mat-icon` and `font awesome` are supported.\n\nTo set up fontawesome to work with `mat-icon` you can see instructions [here](https://stackoverflow.com/a/46208824/3055401)\n\nUse the `icon` property on the `options` object\n\n**Note**: Bar Button does not support the `fab` style, currently.\n\n\n```\n  btnOpts: MatProgressButtonOptions = {\n    active: false,\n    text: 'Stroked Button',\n    spinnerSize: 19,\n    raised: false,\n    stroked: true,\n    flat: false,\n    fab: true, // set fab to true\n    buttonColor: 'accent',\n    spinnerColor: 'accent',\n    fullWidth: false,\n    disabled: false,\n    mode: 'indeterminate',\n    icon: {\n      color: primary,\n      fontSet: 'fa',\n      fontIcon: 'fa-save',\n      inline: true\n    },\n  };\n```\n\n#### Icon API\n\n```\ninterface MatProgressButtonIcon {\n  color?: ThemePalette; // icon color (primary or accent)\n  fontIcon?: string;    // name of the icon (for fontawsome, use 'fa-[icon_name])'\n  fontSet?: string;     // if using fontawesome, use 'fa' (omit for material icons)\n  inline?: boolean;     // automatically size the icon\n  svgIcon?: string;     // name of the icon in the SVG icon set.\n}\n```\n\nMore info in Angular Material [Docs](https://material.angular.io/components/icon/api#MatIcon)\n\n### Bar Button\n\n```js\nimport { Component } from '@angular/core';\nimport { MatProgressButtonOptions } from 'mat-progress-buttons';\n\n@Component({\n  selector: 'app-home',\n  template: '\u003cmat-bar-button (btnClick)=\"btnClick()\" [options]=\"btnOpts\"\u003e\u003c/mat-bar-button\u003e'\n})\nexport class SomeComponent {\n\n  // Button Options\n  btnOpts: MatProgressButtonOptions = {\n    active: false,\n    text: 'Stroked Button',\n    buttonColor: 'accent',\n    barColor: 'accent',\n    raised: false,\n    stroked: true,\n    flat: false,\n    mode: 'indeterminate',\n    value: 0,\n    disabled: false,\n    customClass: 'some-class',\n    // add an icon to the button\n    buttonIcon: {\n      fontSet: 'fa',\n      fontIcon: 'fa-heart',\n      inline: true\n    }\n  };\n\n  // Click handler\n  btnClick(): void {\n    this.btnOpts = { ...this.btnOpts, active: true };\n    setTimeout(() =\u003e {\n      this.btnOpts = { ...this.btnOpts, active: false };\n    }, 3350);\n  }\n};\n```\n\n### Global Options\n\nOptionally pass default `MatProgressButtonOptions` in `forRoot` in side your app.modlue.ts for each button as an array. \n\n```typescript\nconst button1: MatProgressButtonOptions = {\n  id: 'button1', // Id should match the [buttonId] input\n  ...\n};\n\nconst button2: MatProgressButtonOptions = {\n  id: 'button2', // Id should match the [buttonId] input\n  ...\n};\n\n@NgModule({\n  imports: [\n    MatProgressButtonsModule.forRoot([button1, button2]),\n  ],\n  declarations: [HomeComponent],\n})\n```\n\n#### NB: add the id above should match the id provided in the `[buttonId]` input.\n\n```html\n\u003cmat-bar-button\n  (btnClick)=\"someFunc3()\"\n  [buttonId]=\"'button1'\"\n  [active]=\"buttonState\"\n\u003e\u003c/mat-bar-button\u003e\n```\n`[options]` will override Global Options provided in `forRoot`\n\n### Overriding default CSS\n\nTo override CSS (color and background color of spinner buttons), you can write CSS for particular component and use `ViewEncapsulation.None`\n\nExample:\n\nCSS:\n\n```css\n.class-name {\n    background-color: red;\n}\n```\n\nTS:\n\n```typescript\n@Component({\n  ...,\n  encapsulation: ViewEncapsulation.None\n})\nclass MyComponent {}\n```\n\n\u003ca name=\"run-demo-app-locally\"/\u003e\n\n## Run Demo App Locally\n\n- [clone this repo](https://github.com/michaeldoye/mat-progress-buttons.git) by running\n```bash\n$ git clone https://github.com/michaeldoye/mat-progress-buttons.git\n```\n\n- link the **mat-progress-buttons** package\n\n```bash\n$ ng build\n$ npm link ./dist/mat-progress-buttons\n```\nor\n```bash\n$ ng build\n$ npm link ./dist/mat-progress-buttons\n$ ng build --watch\n```\n\n- navigate to the demo app directory\n```bash\n$ cd demo\n```\n\n- install the dependencies\n```bash\n$ npm i\n```\n\n- run/start/serve the app\n```bash\n$ npm run start\n```\nor\n```bash\n$ ng serve --open\n```\n- the app is now hosted by `http://localhost:4200/`\n\n\n\u003ca name=\"development\"/\u003e\n\n## Development\n\n1. clone this [repo](https://github.com/michaeldoye/mat-progress-buttons.git)\n2. Install the dependencies by running `npm i`\n3. build the library `ng buld`\n4. test the library `ng test`\n5. Link the library `npm link ./dist/mat-progress-buttons`\n6. Navigate to the demo app's directory:\n  - `cd demo`\n  - `npm i`\n  - `npm start`\n\n## License\n\nCopyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeldoye%2Fmat-progress-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaeldoye%2Fmat-progress-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaeldoye%2Fmat-progress-buttons/lists"}