{"id":17869253,"url":"https://github.com/osahner/ngx-show-hide-password","last_synced_at":"2025-08-03T09:11:37.493Z","repository":{"id":23437602,"uuid":"89451915","full_name":"osahner/ngx-show-hide-password","owner":"osahner","description":"Angular - Form Input: Add split input button to password or text input. Toggles input type between \"text\" and \"password\".","archived":false,"fork":false,"pushed_at":"2025-02-20T07:25:51.000Z","size":4313,"stargazers_count":20,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-02T21:52:55.917Z","etag":null,"topics":["angular","bootstrap","component","material","password","widget"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/angular-okrmdi","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/osahner.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-04-26T07:33:16.000Z","updated_at":"2025-07-24T14:35:25.000Z","dependencies_parsed_at":"2024-10-24T21:27:10.185Z","dependency_job_id":"fcb6f73a-ed0f-470b-a54c-0986126786bd","html_url":"https://github.com/osahner/ngx-show-hide-password","commit_stats":{"total_commits":186,"total_committers":4,"mean_commits":46.5,"dds":"0.28494623655913975","last_synced_commit":"06ea8ef51f6e543dad77c70e43736dc301c335f4"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/osahner/ngx-show-hide-password","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osahner%2Fngx-show-hide-password","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osahner%2Fngx-show-hide-password/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osahner%2Fngx-show-hide-password/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osahner%2Fngx-show-hide-password/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osahner","download_url":"https://codeload.github.com/osahner/ngx-show-hide-password/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osahner%2Fngx-show-hide-password/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268519454,"owners_count":24263124,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":["angular","bootstrap","component","material","password","widget"],"created_at":"2024-10-28T10:01:14.944Z","updated_at":"2025-08-03T09:11:37.449Z","avatar_url":"https://github.com/osahner.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# ngx-show-hide-password\n\n\u003e Add split input button to password or text input. Toggles input type between \"text\" and \"password\".\n\n[![Build Status](https://api.travis-ci.com/osahner/ngx-show-hide-password.svg?branch=master)](https://app.travis-ci.com/github/osahner/ngx-show-hide-password)\n[![npm version](https://badge.fury.io/js/ngx-show-hide-password.svg)](https://badge.fury.io/js/ngx-show-hide-password)\n[![codecov](https://codecov.io/gh/osahner/ngx-show-hide-password/branch/master/graph/badge.svg)](https://codecov.io/gh/osahner/ngx-show-hide-password/branch/master)\n\n## Installation\n\nFor an upt-to-date angular project version 16 with standalone Componentents:\n```sh\nnpm install ngx-show-hide-password --save\nnpm install @fortawesome/angular-fontawesome \\\n    @fortawesome/fontawesome-svg-core \\\n    @fortawesome/free-solid-svg-icons --save\n```\n\nFor angular project version 15 and Bootstrap 5:\n```sh\nnpm install ngx-show-hide-password@2.6.5 --save\nnpm install @fortawesome/angular-fontawesome \\\n    @fortawesome/fontawesome-svg-core \\\n    @fortawesome/free-solid-svg-icons --save\n```\n:exclamation: For previous Angular releases please check the compatibility table of [ngx-show-hide-password](#compatibility-chart) **and** [@fortawesome/angular-fontawesome](https://github.com/FortAwesome/angular-fontawesome#compatiblity-table)!\n\n:white_check_mark: e.g. for angular version 8:\n```sh\nnpm install ngx-show-hide-password@~2.1.0 --save\nnpm install @fortawesome/angular-fontawesome@^0.5 \\\n    @fortawesome/fontawesome-svg-core \\\n    @fortawesome/free-solid-svg-icons --save\n```\n\n## Integration\n\n### with standalone components:\n```ts\n// nothing to do in main.ts\n\n...\n// component.ts\nimport {\n  ShowHidePasswordComponent,\n  ShowHideInputDirective,\n  ShowHideStatusDirective,\n  ShowHideTriggerDirective,\n} from 'ngx-show-hide-password';\n\n@Component({\n  ...\n  standalone: true,\n  imports: [\n    ShowHidePasswordComponent,\n    ShowHideInputDirective,\n    ShowHideStatusDirective,\n    ShowHideTriggerDirective,\n  ],\n})\nexport class AppComponent {\n  constructor(private showHideService: ShowHideService) {\n    ...\n    effect(() =\u003e {\n      const show = this.showHideService.getSignal('password')();\n      ...\n    });\n  }\n}\n```\n\n### as module (angular pre v16 and ngx-show-hide-password pre v2.7.0):\n```ts\n// app.module.ts\nimport { ShowHidePasswordModule } from 'ngx-show-hide-password';\n// no need to import @fortawesome/angular-fontawesome for the component\n...\n@NgModule({\n  ...\n  imports: [\n    BrowserModule,\n    ShowHidePasswordModule,\n    ...\n  ],\n  ...\n})\n```\n\n### template as component ...\n```html\n\u003cshow-hide-password size=\"lg\" btnStyle=\"primary\" [btnOutline]=\"false\"\u003e\n  \u003cinput type=\"password\" name=\"...\" \u003e\n\u003c/show-hide-password\u003e\n```\n\n### or template with directives ...\n```html\n\u003cmat-form-field\u003e\n  \u003cinput id=\"mysecretpassword\" type=\"password\" placeholder=\"Password\" matInput showHideInput\u003e\n  \u003ci matSuffix\n    class=\"material-icons\"\n    showHideTrigger=\"mysecretpassword\"\n    [showHideStatus]=\"{ materialIcon: true, id: 'mysecretpassword' }\"\n  \u003e\u003c/i\u003e\n\u003c/mat-form-field\u003e\n```\n\n| Password hidden                          | Password exposed                           |\n| ---------------------------------------- | ------------------------------------------ |\n| ![Hidden password](resources/hidden.png) | ![Exposed password](resources/exposed.png) |\n\n\n### How to customize and some examples how to use the directives \u0026 service\n\n- [example on stackblitz](https://stackblitz.com/edit/angular-dvy758?embed=1\u0026file=src/app/app.component.html).\n- some more [basic examples here](https://github.com/osahner/ngx-show-hide-password/tree/master/src/app/app.component.html).\n\n\n## Documentation\n\n### Component: show-hide-password\n\u003e Demo on [stackblitz](https://stackblitz.com/edit/angular-okrmdi?embed=1\u0026file=src/app/app.component.html)\n\n| attribute      | type      | description                                                                                          |\n| -------------- | --------- | ---------------------------------------------------------------------------------------------------- |\n| **btnOutline** | _boolean_ | default: `true`                                                                                      |\n| **btnStyle**   | _string_  | `'primary'`, `'secondary'`, `'success'`, `'warning'`, `'danger'` or `'info'`. default: `'secondary'` |\n| **size**       | _string_  | `'sm'`, `'lg'`. default: nothing.                                                                    |\n\n### Directive: showHideInput\n\u003e Demo on [stackblitz](https://stackblitz.com/edit/angular-2srzhs?embed=1\u0026file=src/app/app.component.html)\n\n:information_source: All directives (and the service) are bound to the same unique **id**. This can be the attribute **id** of the HTML input element or you can enter a synthetic ID.\n\n| attribute      | type     | description                              |\n| -------------- | -------- | ---------------------------------------- |\n| **id** | _string_ | unique id. |\n\n#### Directive: showHideTrigger\n\n| type     | description                              |\n| -------- | ---------------------------------------- |\n| _string_ | unique id. **\\* required** |\n\n#### Directive: showHideStatus\n\n```ts\nexport interface ShowHideStatusConfig {\n  id: string;\n  show?: string;\n  hide?: string;\n  materialIcon?: boolean;\n}\n```\n\n| attribute        | type      | description                                                            |\n| ---------------- | --------- | ---------------------------------------------------------------------- |\n| **id**           | _string_  | unique id. **\\* required**                               |\n| **show**         | _string_  | optional class/material icon identifier. default: `'visibility'`       |\n| **hide**         | _string_  | optional class/material icon identifier. default: `'visibility_off'`   |\n| **materialIcon** | _boolean_ | if true updates innerHTML instead of class attribute. default: `false` |\n\n### Service: ShowHideService\n\n- _function_ **getSignal**\n\u003e return _Signal_ for input with _id_\n```ts\ngetSignal(id: string): WritableSignal\u003cboolean\u003e\n```\n- _function_ **setShow**\n\u003e set Status for input with _id_\n```ts\nsetShow(id: string, show: boolean): void\n```\n- _function_ **toggleShow**\n\u003e toggles Status for input with _id_\n```ts\ntoggleShow(id: string): void\n```\n\n## Release History\n- 19.0.1\n  - bump version to 19 (follow angular version)\n- 2.8.0\n  - update @angular/cli and @angular/core to v19\n- 2.7.4\n  - update @angular/cli and @angular/core to v18\n- 2.7.2\n  - update @angular/cli and @angular/core to v17\n- 2.7.1\n  - replaced Observables with Subjects, made @Input() id required\n- 2.7.0\n  - update @angular/cli and @angular/core to v16, migrate to standalone components\n- 2.6.5\n  - update @angular/cli and @angular/core to v15\n- 2.6.4\n  - update @angular/cli and @angular/core to v14\n- 2.6.2\n  - enable angular strict mode\n  - [renamed default branch to main](#rename-local-master-branch-to-main)\n- 2.6.1\n  - (breaking) update ShowHideComponent to Bootstrap 5\n- 2.5.0\n  - update @fortawesome icons v6\n- 2.4.0\n  - update @angular/cli and @angular/core to v13, @fortawesome/angular-fontawesome v1\n- 2.3.0\n  - update @angular/cli and @angular/core to v10, @fortawesome/angular-fontawesome v0.7, @fortawesome/free-solid-svg-icons v5.14\n- 2.2.4\n  - ShowHideInputDirective no longer needs an Input Attribute ID. ID is now an `Input()`. Thanks to @aboodz\n- 2.2.2\n  - update @angular/cli and @angular/core to v9\n- 2.1.0\n  - dependencies updated\n- 2.0.5\n  - update @angular/cli and @angular/core to v8\n- 2.0.3\n  - add directives: **showHideInput**, **showHideTrigger** and **showHideStatus**\n- 2.0.0\n  - switched to @angular/cli and ng-packagr,\n  - requires @angular/core v7 and @fortawesome/angular-fontawesome, uses Font Awesome Eye/EyeSlash Icon\n- 1.2.5\n  - add new attributes: `btnStyle` and `btnOutline`\n  - bootstrap 4.0.0\n- 1.2.1\n  - requires Angular v5, for Angular v4 use `@1.1.0` instead\n- 1.1.0\n  - initial release\n\n### compatibility chart\n| local version | angular version | Bootstrap version | standalone |\n| ------------- | --------------- | ----------------- | ---------- |\n| `@^19.0.0`    | v19             | v5                | ✅         |\n| `@^2.8.0`     | v19             | v5                | ✅         |\n| `@^2.7.4`     | v18             | v5                | ✅         |\n| `@^2.7.2`     | v17             | v5                | ✅         |\n| `@^2.7.0`     | v16             | v5                | ✅         |\n| `@^2.6.5`     | v15             | v5                |            |\n| `@^2.6.4`     | v14             | v5                |            |\n| `@^2.6.1`     | v13             | v5                |            |\n| `@^2.4.0`     | v13             | v4                |            |\n| `@^2.3.1`     | v11             |                   |            |\n| `@^2.3.0`     | v10             |                   |            |\n| `@^2.2.3`     | v9              |                   |            |\n| `@~2.1.0`     | v8              |                   |            |\n| `@~2.0.3`     | v7              |                   |            |\n| `@~1.2.5`     | v5 and v6       |                   |            |\n| `@~1.1.0`     | v4              |                   |            |\n\n:exclamation: The Bootstrap version is only important if you use the `show-hide-password` Component.\n\n #### Rename local master branch to main\n```shell\ngit branch -m master main\ngit fetch origin\ngit branch -u origin/main main\n```\n\n## LICENCE\n\nMIT © [Oliver Sahner](mailto:osahner@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosahner%2Fngx-show-hide-password","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosahner%2Fngx-show-hide-password","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosahner%2Fngx-show-hide-password/lists"}