{"id":21775583,"url":"https://github.com/js-smart/ng-kit","last_synced_at":"2025-04-12T08:32:54.061Z","repository":{"id":37088615,"uuid":"438092382","full_name":"js-smart/ng-kit","owner":"js-smart","description":"Reusable Angular components, Utility classes","archived":false,"fork":false,"pushed_at":"2025-03-25T00:28:37.000Z","size":6867,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T15:47:27.646Z","etag":null,"topics":["angular","bootstrap","typescript"],"latest_commit_sha":null,"homepage":"https://ng-kit.netlify.app/","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/js-smart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"ng-kit"}},"created_at":"2021-12-14T02:34:21.000Z","updated_at":"2025-03-07T01:42:14.000Z","dependencies_parsed_at":"2023-01-31T19:46:06.160Z","dependency_job_id":"4a7a5e8a-e38e-48b9-b296-4d021dab7ae6","html_url":"https://github.com/js-smart/ng-kit","commit_stats":{"total_commits":131,"total_committers":2,"mean_commits":65.5,"dds":0.01526717557251911,"last_synced_commit":"395f990a09cda81f593cbb2f9165abe795bef8ae"},"previous_names":["js-smart/ng-utils","js-smart/ngxsmart","js-smart/ng-kit"],"tags_count":93,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-smart%2Fng-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-smart%2Fng-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-smart%2Fng-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-smart%2Fng-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-smart","download_url":"https://codeload.github.com/js-smart/ng-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968223,"owners_count":21025817,"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","bootstrap","typescript"],"created_at":"2024-11-26T20:01:39.535Z","updated_at":"2025-04-12T08:32:54.034Z","avatar_url":"https://github.com/js-smart.png","language":"TypeScript","funding_links":["https://opencollective.com/ng-kit"],"categories":["Third Party Components"],"sub_categories":["Mixed Utilities"],"readme":"# Angular components and utilities\n\nReusable Angular components built with Angular Material and Bootstrap 5.x, Utility classes/functions for Date, Form and String operations\n\n\u003cp align=\"center\"\u003e\n\n[![CI](https://github.com/js-smart/ng-kit/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/js-smart/ng-kit/actions/workflows/build.yml)\n\u003ca href=\"https://www.npmjs.com/@js-smart/ng-kit\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/@js-smart/ng-kit\" alt=\"Ng Kit on npm\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n### Installation\n\nInstall the library\n\n```shell\nnpm install @js-smart/ng-kit\n```\n\nand use it as shown below in each section\n\n### Technologies\n\n1. Angular\n2. Bootstrap\n\n## Auto Complete\n\nReusable Auto Complete that extends Mat Auto Complete component\n\n### Demo\n\nhttps://ng-kit.netlify.app\n\n### Usage\n\nThe library has one `autocomplete` component. To use the Auto Complete component, add the following code to the HTML page\n\n**app.component.html**\n\n```typescript\n\u003c!-- Auto Complete with Objects --\u003e\n\n\u003cform [formGroup] = \"genericFormGroup\" \u003e\n\u003cautocomplete\n  [data] = \"cities\"\n  [inputFormGroup] = \"genericFormGroup\"\n  [required] = \"true\"\n  [displayWith] = \"displayFn\"\nbindLabel = \"location\"\nbindValue = \"id\"\nlabel = \"City\"\nplaceHolder = \"Select City\" \u003e\n  \u003c/autocomplete\u003e\n  \u003c /form\u003e\n\n```\n\n**app.component.ts**\n\nThen define form group instances and object array (cities) and names (for string array)\n\n```typescript\n// Define objects  \ncities = [{ id: 1001, location: 'New York' }, { id: 1002, location: 'Boston' }, { id: 1001, location: 'Washington DC' }];\n\n// Define Form Groups \ninputFormGroup = this.fb.group({\n  autocomplete: ['']\n})\n\n//Display function\ndisplayFn(object\n:\nany\n):\nstring\n{\n  if (typeof object === \"string\") return object;\n  return object \u0026\u0026 object[\"location\"] ? object[\"location\"] : \"\";\n}\n```\n\nIf you are using strings rather than objects, do not provide `bindLabel`, `bindValue` and `displayWith` inputs. See below sample\n\n```\n\u003c!-- Auto Complete with Strings --\u003e\n\u003cform [formGroup]=\"inputFormGroup\"\u003e\n  \u003cautocomplete\n    [data]=\"names\"\n    [inputFormGroup]=\"inputFormGroup\"\n    [required]=\"true\"\n    label=\"City\"\n    placeHolder=\"Select City\"\u003e\n  \u003c/autocomplete\u003e\n\u003c/form\u003e\n```\n\n### Auto Complete API\n\n#### List of selectors that can be used to select the component(s)\n\n| AutoComplete Selector          | \n|--------------------------------| \n| autocomplete, lib-autocomplete | \n\n#### Properties\n\n| Property       | Description                                                                                                               | Type              | Default Value |\n|----------------|---------------------------------------------------------------------------------------------------------------------------|-------------------|---------------|\n| inputFormGroup | Input Form Group                                                                                                          | FormGroup         |               |\n| label          | Label of the AutoComplete                                                                                                 | string            |               |\n| placeHolder    | PlaceHolder of the AutoComplete                                                                                           | string            |               |\n| appearance     | Appearance of the AutoComplete, defaults to `fill`                                                                        | string            | fill          |\n| classes        | List of CSS classes that need to applied to autocomplete                                                                  | string            |               |\n| bindLabel      | Applies only to AutoComplete with Objects. Attribute of the Object whose value would be shown when searching for data     | string            | id            |\n| bindValue      | Applies only to AutoComplete with Objects. Attribute of the Object whose value would be used for search. Defaults to `ID` | string            | id            |\n| displayWith    | Applies only to AutoComplete with Objects. A function used to show display value in Input                                 | boolean           | false         |\n| required       | Provide `true` if AutoComplete is required, otherwise provide `false`                                                     | boolean           | false         |\n| data           | List of Objects or String values that need to be bind and searched for                                                    | any[] or string[] | false         |\n\n## Alert\n\nReusable alert component created with Bootstrap 5+ and Angular 17+\n\n### Auto Complete API\n\n#### List of selectors that can be used to select the component\n\n| Selector        | \n|-----------------| \n| alert,lib-alert | \n\n#### Properties\n\n| Property         | Description                                                                                                | Type             | Default Value |\n|------------------|------------------------------------------------------------------------------------------------------------|------------------|---------------|\n| dismissible      | If set, displays an inline \"Close\" button                                                                  | boolean          | false         |\n| dismissOnTimeout | If set, dismisses the alert after Dismiss Timeout                                                          | boolean          | true          |\n| dismissTimeout   | Number in milliseconds, after which alert will be closed                                                   | string or number | 5000          |\n| isOpen           | Is alert visible                                                                                           | boolean          | false         |\n| type             | Alert type. Provides one of four bootstrap supported contextual classes: success, info, warning and danger | string           | info          |\n\n## Spinner\n\nReusable Spinner component created with Bootstrap 5.x and Angular 17.x\n\n### Demo\n\nhttps://main--js-smart-ng-kit.netlify.app/alert-demo\n\n### API\n\n#### List of selectors that can be used to select the component\n\n| Selector            | \n|---------------------| \n| spinner,lib-spinner | \n\n#### Properties\n\n| Property         | Description                                  | Type                     | Default Value |\n|------------------|----------------------------------------------|--------------------------|---------------|\n| bootstrapSpinner | Use Boostrap Spinner. Default `true`         | boolean                  | false         |\n| diameter         | Diameter of the Angular Material spinner     | boolean                  | true          |\n| color            | Color of the Angular Material spinner        | string or `ThemePalette` | 5000          |\n| strokeWidth      | Stroke Width of the Angular Material spinner | boolean                  | false         |\n\n## Print\n\nAngular (2++) directive that prints HTML section\n\n### Usage\n\nImport the main module `NgxPrintModule` :\n\n   ```js\nimport { NgxPrintModule } from '@js-smart/print';\n\n@NgModule({\n  ...\n    imports:\n[NgxPrintModule, ...],\n...\n})\n\nexport class YourAppModule {\n}\n```\n\n**3-** Then plug n' play with it:\n\n- Assuming you want to print the following HTML section:\n\n```html\n\n\u003cdiv\u003e\n  \u003c!--Your html stuff that you want to print--\u003e\n\u003c/div\u003e\n\u003cbutton\u003eprint\u003c/button\u003e \u003c!--Your relevant print button--\u003e\n\n```\n\n- Now, what you have to do is tagging your *wanted-to-print* section by an `id` attribute, then link that `id` to a\n  directive parameter in your button :\n\n```html\n \u003c!--\n   1)- Add an ID here\n --\u003e\n\u003cdiv id=\"print-section\"\u003e\n  \u003c!--Your html stuff that you want to print--\u003e\n\u003c/div\u003e\n\n\u003c!--\n  2)- Add the directive name in your button (ngxPrint),\n  3)- Affect your ID to printSectionId\n--\u003e\n\u003cbutton printSectionId=\"print-section\" ngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n### Optional properties\n\n- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print\n  button `printTitle`:\n\n```html\n\n\u003cdiv id=\"print-section\"\u003e\n\n  \u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  printTitle=\"MyTitle\"\n  printSectionId=\"print-section\"\n  ngxPrint\u003eprint\n\u003c/button\u003e\n\n```\n\n- Also, would you like to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite\n  styles to another attribute called `printStyle`:\n\n```html\n\n\u003cdiv id=\"print-section\"\u003e\n\n  \u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  [printStyle]=\"{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}\"\n  printSectionId=\"print-section\"\n  ngxPrint\u003eprint\n\u003c/button\u003e\n\n```\n\nHere some simple styles were added to every `h1` \u0026 `h2` tags within the `div` where `print-section` is tagged to\nits `id` attribute.\n\n- If you would like to use your existing CSS with media print you can add the `useExistingCss` attribute:\n\n```html\n\n\u003cdiv id=\"print-section\"\u003e\n\n  \u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  [useExistingCss]=\"true\"\n  printSectionId=\"print-section\"\n  ngxPrint\u003eprint\n\u003c/button\u003e\n\n```\n\n- If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css\n  use `styleSheetFile`:\n\n```html\n\n\u003cdiv id=\"print-section\"\u003e\n\n  \u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  styleSheetFile=\"assets/css/custom1.css,assets/css/custom2.css\"\n  printSectionId=\"print-section\"\n  ngxPrint\u003eprint\n\u003c/button\u003e\n\n```\n\n### Publish library to NPM\n\n1. Build the library\n    ```shell\n    nx build ng-kit\n    ```\n2. If the NPM token is not configured, open `~/.npmrc` and add the following line:\n    ```shell\n    //registry.npmjs.org/:_authToken=\u003cyour npm token\u003e\n    ```\n3. Then navigate to `dist` directory anf publish the library to NPM. If prompted, enter the 2fa auth code from the Authenticator app.\n    ```shell\n    cd dist/libs/ng-kit \u0026\u0026 npm publish --tag latest\n    ```\n   For beta releases use tag `--tag beta`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-smart%2Fng-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-smart%2Fng-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-smart%2Fng-kit/lists"}