{"id":13983063,"url":"https://github.com/joshuawwright/ngx-autosize-input","last_synced_at":"2026-01-12T05:49:03.521Z","repository":{"id":26641273,"uuid":"109419930","full_name":"joshuawwright/ngx-autosize-input","owner":"joshuawwright","description":"is an Angular directive that automatically adjusts the width of an input element. Its is unique because it both shrinks and increases the width.","archived":false,"fork":false,"pushed_at":"2025-06-28T00:48:32.000Z","size":2642,"stargazers_count":22,"open_issues_count":0,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-14T21:25:37.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshuawwright.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2017-11-03T16:44:56.000Z","updated_at":"2025-07-24T14:35:33.000Z","dependencies_parsed_at":"2024-06-18T21:18:25.139Z","dependency_job_id":"f9a70065-ee2f-4ffe-994a-6df91d3b141b","html_url":"https://github.com/joshuawwright/ngx-autosize-input","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"d41023eb31856d19eea8226ef2de5b198c64d203"},"previous_names":["desertfoxnv/ngx-autosize-input"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/joshuawwright/ngx-autosize-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuawwright%2Fngx-autosize-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuawwright%2Fngx-autosize-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuawwright%2Fngx-autosize-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuawwright%2Fngx-autosize-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshuawwright","download_url":"https://codeload.github.com/joshuawwright/ngx-autosize-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuawwright%2Fngx-autosize-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08-09T05:01:37.041Z","updated_at":"2026-01-12T05:49:03.483Z","avatar_url":"https://github.com/joshuawwright.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# ngx-autosize-input\n\nAn Angular directive that automatically adjusts the width of an input element to its content. Unlike other auto-grow directives, it is unique because it both shrinks and increases the width based on the content.\n\n[![npm](https://img.shields.io/npm/v/ngx-autosize-input.svg?style=flat-square)](https://www.npmjs.com/package/ng-packagr)\n[![npm License](https://img.shields.io/npm/l/ngx-autosize-input.svg?style=flat-square)](https://github.com/ng-packagr/ng-packagr/blob/main/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/joshuawwright/ngx-autosize-input.svg?label=GitHub%20Stars\u0026style=flat-square)](https://https://github.com/joshuawwright/ngx-autosize-input)\n[![npm Downloads](https://img.shields.io/npm/dw/ngx-autosize-input.svg?style=flat-square)](https://www.npmjs.com/package/ngx-autosize-input)\n[![Status Checks](https://github.com/joshuawwright/ngx-autosize-input/actions/workflows/ci.yml/badge.svg)](https://github.com/joshuawwright/ngx-autosize-input/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/github/joshuawwright/ngx-autosize-input/graph/badge.svg?token=6WPEL27FSC)](https://codecov.io/github/joshuawwright/ngx-autosize-input)\n\n## Versions\n\nThe major version will match the Angular major version going forward (Angular 10+). For example version 10, will work for Angular 10.\n\n## Stack Blitz Demo\n\nhttps://stackblitz.com/edit/angular-ivy-dtjmsk?file=src/app/hello.component.ts\n\n## Installation\n\n```bash\nnpm install ngx-autosize-input\n```\n\nAdd AutoSizeInputDirective to your @NgModule imports:\n\n```typescript\nimport {AutoSizeInputDirective} from \"ngx-autosize-input\";\n\n@NgModule({\n  imports: [\n    AutoSizeInputDirective\n  ]\n})\n```\n\nThe input options can be set from a provider (see below), or from the template (skip to the next section).\n\n```typescript\nimport {AUTO_SIZE_INPUT_OPTIONS, AutoSizeInputDirective, AutoSizeInputOptions} from 'ngx-autosize-input';\n\nconst CUSTOM_AUTO_SIZE_INPUT_OPTIONS: AutoSizeInputOptions = {\n  extraWidth: 0,\n  includeBorders: false,\n  includePadding: true,\n  includePlaceholder: true,\n  maxWidth: -1,\n  minWidth: -1,\n  setParentWidth: false,\n  usePlaceHolderWhenEmpty: false,\n}\n\n@NgModule({\n  imports: [\n    AutoSizeInputDirective\n  ],\n  providers: [\n    { provide: AUTO_SIZE_INPUT_OPTIONS, useValue: CUSTOM_AUTO_SIZE_INPUT_OPTIONS }\n  ]\n})\n```\n\n## Use Example\n\nUse directly in your HTML templates on an input element:\n\n```\n\u003cinput autoSizeInput\u003e\n```\n\n## Using Bootstrap\n\nIf using Bootstrap, set the directive to include borders so that the text is not cut off.\n\n```\n\u003cinput autoSizeInput [includeBorders]=true\u003e\n```\n\n## Parameters\n\nThe following parameters customize the directive.\n\n### \\[extraWidth]\n\nAdd extra width, in units of pixels.\n\nDefault Value: 0px\n\nExample (add 10px):\n\n```\n\u003cinput autoSizeInput [extraWidth]=\"10\"\u003e\n```\n\n### \\[includePlaceholder]\n\nSet placeholder text width as minimum width;\nNote that [minimumWidth] will override this property.\n\nDefault Value: true\n\nExample (turn off placeholder):\n\n```\n\u003cinput autoSizeInput [includePlaceholder]=\"false\"\u003e\n```\n\n### \\[includeBorders]\n\nIncludes border width, so that text is not cut off.\nNote only even left and right borders are supported at this time.\n\nDefault Value: false\n\nExample (turn on include borders):\n\n```\n\u003cinput autoSizeInput [includeBorders]=\"true\"\u003e\n```\n\n### \\[includePadding]\n\nIncludes padding width, so that text is not cut off.\n\nDefault Value: true\n\nExample (turn off include padding):\n\n```\n\u003cinput autoSizeInput [includePadding]=\"false\"\u003e\n```\n\n### \\[minWidth]\n\nSets minimum width, in units of pixels.\n\nDefault Value: 0\n\nExample (50px minimum width):\n\n```\n\u003cinput autoSizeInput [minWidth]=\"50\"\u003e\n```\n\n### \\[maxWidth]\n\nSets maximum width, in units of pixels.\n\nDefault Value: 0\n\nExample (100px maximum width):\n\n```\n\u003cinput autoSizeInput [maxWidth]=\"100\"\u003e\n```\n\n### \\[setParentWidth]\n\nSets parent width automatically, instead of input width. Useful when you need to update a parent's width.\n\nDefault Value: false\n\nExample (input wrapped in an Angular Material form field component):\n\n```\n\u003cmat-form-field\u003e // This will be resized\n   \u003cinput autoSizeInput [setParentWidth]=\"true\"\u003e\n\u003c/mat-form-field\u003e\n```\n\n### \\[usePlaceholderWhenEmpty]\n\nSets width to placeholder width, only when value is empty.\n\nDefault Value: false\n\nExample (turn on placeholder when empty):\n\n```\n\u003cinput autoSizeInput [usePlaceholderWhenEmpty]=\"true\"\u003e\n```\n\n### \\[useValueProperty]\n\nIf the value of the form control is an object but the input value is formatted setting this\nvalue to true will use the value property of the input instead of retreiving the value from\nthe form control or model. This option is not globally configurable and must be set on each input.\n\nDefault Value: false\n\nExample (ngbTypeahead with inputFormatter):\n`search$` returns an array of objects `{ firstName: string; lastName: string; }[]` and `formatInput` transforms the selected object to `` `${firstName} ${lastName}` ``. The value applied to the form control will be the object\nselected so in-order to get the actual string value in the input we need to look at the value property.\n\n```\n\u003cinput autoSizeInput [useValueProperty]=\"true\" formControlName=\"fullName\" [ngbTypeahead]=\"search$\" [inputFormatter]=\"formatInput\"\u003e\n```\n\n## Author\n\nJoshua Wright\n\n## License\n\nThis project is licensed under the MIT license. See the [License](LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuawwright%2Fngx-autosize-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuawwright%2Fngx-autosize-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuawwright%2Fngx-autosize-input/lists"}