{"id":29037998,"url":"https://github.com/teamsolutionanalysts/resuable-readme","last_synced_at":"2026-02-04T08:38:18.801Z","repository":{"id":128645371,"uuid":"575312655","full_name":"teamSolutionAnalysts/resuable-readme","owner":"teamSolutionAnalysts","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-07T08:26:40.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-26T13:07:00.304Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/teamSolutionAnalysts.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-12-07T08:23:11.000Z","updated_at":"2022-12-07T08:23:11.000Z","dependencies_parsed_at":"2023-03-15T12:16:03.959Z","dependency_job_id":null,"html_url":"https://github.com/teamSolutionAnalysts/resuable-readme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/teamSolutionAnalysts/resuable-readme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamSolutionAnalysts%2Fresuable-readme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamSolutionAnalysts%2Fresuable-readme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamSolutionAnalysts%2Fresuable-readme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamSolutionAnalysts%2Fresuable-readme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teamSolutionAnalysts","download_url":"https://codeload.github.com/teamSolutionAnalysts/resuable-readme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamSolutionAnalysts%2Fresuable-readme/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265888898,"owners_count":23844527,"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":[],"created_at":"2025-06-26T13:06:59.771Z","updated_at":"2026-02-04T08:38:13.779Z","avatar_url":"https://github.com/teamSolutionAnalysts.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# OTP UI\n\nThis project is about OTP UI.\nYou can customize OTP length, form title and description.\n\n## Project Prerequisite\n\n1. Angular CLI v13.0.0\n2. Node.js v16.16.0\n3. Project uses [ngx-bootstrap](https://www.npmjs.com/package/ngx-bootstrap) v8.0.0, To add ngx-bootstrap : \u003cbr /\u003e `ng add ngx-bootstrap@8.0.0`\n\n## Running Development server\n\n1. `npm i` in root directory\n2. `ng serve` for dev server (`http://localhost:4200/`)\n\n## Running unit tests\n\n1. Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Adding Component to your project\n\n- Copy OTP module to your project\n- Add OtpModule to your module\n\n```\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    OtpModule,\n    ...\n  ],\n  ...\n})\n```\n\n- Implementation - 1 : Show using HTML template\n\n```\n// in html file:\n...\n\u003cotp-component *ngIf=\"show\" (onVerify)=\"verify($event)\"\u003e\u003c/otp-component\u003e\n...\n\n// in ts file:\n...\nshow=true;\nverify(otp:number){\n  console.log(otp)\n}\n...\n```\n\n- Implementation - 2 : Show using OtpService.\n\n```\nimport { OtpService } from './otp/services/otp.service';\n...\nconstructor(private otpService: OtpService) {\n  this.otpService.onVerify.subscribe((otp) =\u003e {\n    console.log(otp);\n  });\n}\n...\n// Show the otp form\nthis.otpService.show({\n  formMessage: 'this is form message',\n  formTitle: 'First',\n  otpLength: 6,\n});\n\n// Manually hide the otp form\nthis.otpService.hide();\n```\n\n## Documentation\n\nSee appComponent for example.\n\n### OtpService.show({params})\n\n\u0026nbsp;\u0026nbsp;Display OTP form compoent to UI with given params.\n| Params | Type | Default | Description |\n| ----------- | ------ | ------------------------------------------- | ------------------------------------------------------------------------- |\n| formTitle | string | OTP Verification | Display title of the form. |\n| formMessage | string | Please enter the OTP that we have sent you. | Display message in small font. for ex. (we have sent mail to xyz@abc.com) |\n| otpLength | number | 4 | Length Of OTP |\n\n### OtpService.hide()\n\n\u0026nbsp;\u0026nbsp; To manually hide OTP component from UI, no params reqired.\n\n### OtpService.onVerify\n\n\u0026nbsp;\u0026nbsp; You can subscribe to this Observable. \u003cbr /\u003e\n\u0026nbsp;\u0026nbsp; It will be called when user press verify button with OTP as a value. \u003cbr /\u003e\n\u0026nbsp;\u0026nbsp; Example:\n\u0026nbsp;\u0026nbsp;\n\n```\nthis.otpService.onVerify.subscribe((otp) =\u003e {\n  console.log(otp);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamsolutionanalysts%2Fresuable-readme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamsolutionanalysts%2Fresuable-readme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamsolutionanalysts%2Fresuable-readme/lists"}