{"id":19435315,"url":"https://github.com/lbgm/phone-input","last_synced_at":"2025-04-24T20:32:30.280Z","repository":{"id":61322875,"uuid":"548898979","full_name":"lbgm/phone-input","owner":"lbgm","description":"An Angular phone input component module","archived":false,"fork":false,"pushed_at":"2023-11-04T17:17:38.000Z","size":540,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-20T00:39:15.990Z","etag":null,"topics":["angular","angular-material","angular12","component","library","phone-input","phone-number","phoneinput"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbgm.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}},"created_at":"2022-10-10T11:06:43.000Z","updated_at":"2023-09-06T10:52:18.000Z","dependencies_parsed_at":"2024-10-30T04:29:03.601Z","dependency_job_id":null,"html_url":"https://github.com/lbgm/phone-input","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":0.4285714285714286,"last_synced_commit":"4ce43e06206af580915d8252be7e96dded582011"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fphone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fphone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fphone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fphone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbgm","download_url":"https://codeload.github.com/lbgm/phone-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250704938,"owners_count":21473789,"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-material","angular12","component","library","phone-input","phone-number","phoneinput"],"created_at":"2024-11-10T15:05:29.735Z","updated_at":"2025-04-24T20:32:29.685Z","avatar_url":"https://github.com/lbgm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PhoneInput\n\nAn Angular phone input component module.\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.\n\n![PhoneInput screenshot](https://user-images.githubusercontent.com/92580505/232258765-222d4527-6317-4bc4-a799-70582e351eaf.png)\n\n## Install\n\n```sh\nnpm i @lbgm/phone-input\n```\n\n## Props \u0026 Types\n\n```ts\nexport type T_FormFieldControl = { [key: string]: AbstractControl; };\n\nexport interface PhoneDATA {\n  country?: string;\n  dialCode?: string | number;\n  nationalNumber?: string | number;\n  number?: string | number;\n  isValid?: boolean;\n}\n\n@Input() value?: string = \"\"; // like '22997000000'\n@Input() label?: string = \"\";\n@Input() hasError?: boolean = false;\n@Input() hasSuccess?: boolean = false;\n@Input() placeholder?: string = \"\"\n@Input() name?: string = \"lbgm-phone-input\"\n@Input() required?: boolean = false;\n@Input() defaultCountry?: string = 'BJ';\n@Input() arrow?: boolean = true; // to show or hide arrow\n@Input() listHeight?: number = 150;\n@Input() allowed?: string[] = ([]);\n\n@Input() group?: FormGroup;\n@Input() controls?: T_FormFieldControl;\n```\n\n- pass `value` on this format: `${dialCode}${nationalNumber}`\n- `allowed` is an array of country iso2 (string).\n\n## Slots\n\n```html\n\u003c!-- add an element with attribute `arrow` to replace arrow icon. --\u003e\n\u003c!-- ng-content code: --\u003e\n\u003cng-content select=\"[arrow]\"\u003e\u003c/ng-content\u003e\n\n\n\u003c!-- any slot --\u003e\n\u003c!-- append content to component --\u003e\n\u003c!-- add an element or a container with attribute `slot`--\u003e\n\u003c!-- ng-content code: --\u003e\n\u003cng-content select=\"[slot]\"\u003e\u003c/ng-content\u003e\n```\n\n## Use\n\n```ts\n// app.module.ts\n\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { PhoneInputModule } from '@lbgm/phone-input'; // here\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    ReactiveFormsModule,\n    PhoneInputModule // here\n  ],\n  providers: [\n    {\n      provide: Window,\n      useValue: window\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n```html\n\u003c!-- with FormBuilder, the component handle error automatically --\u003e\n\u003clbgm-phone-input\n [label]=\"'N° de téléphone'\"\n [required]=\"true\"\n [name]=\"'phone'\"\n [group]=\"form\"\n [controls]=\"form.controls\"\n (phoneEvent)=\"input=$event\"\n (phoneData)=\"inputData=$event\"\n (country)=\"inputCountry=$event\"\n\u003e\n\u003c/lbgm-phone-input\u003e\n\n\n\u003c!-- without FormBuilder --\u003e\n\u003clbgm-phone-input\n [label]=\"'N° de téléphone'\"\n [required]=\"true\"\n [name]=\"'phone'\"\n (phoneEvent)=\"input=$event\"\n (phoneData)=\"inputData=$event\"\n (country)=\"inputCountry=$event\"\n\u003e\n\u003c/lbgm-phone-input\u003e\n```\n\n- phoneEvent is string\n- country is string\n- phoneData is type [PhoneDATA](#props--types)\n\n### Use with FormBuilder example\n\n```ts\nimport { Component } from '@angular/core';\nimport { FormBuilder, Validators, FormGroup } from '@angular/forms';\nimport { PhoneDATA } from '@lbgm/phone-input';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  title = 'phone-input';\n  form: FormGroup;\n  input?: string = \"\";\n  inputData?: PhoneDATA;\n  inputCountry: string = \"\";\n\n\n  constructor(private fb: FormBuilder) {\n     this.form = fb.group({\n      'phone': [\n        '',\n        [\n          Validators.required,\n          Validators.minLength(8)\n        ]\n      ]\n     })\n  }\n\n  onSubmit(): void {\n    this.form.markAllAsTouched();\n  }\n}\n```\n\n## Error on field\n\n![Error case screenshot](https://user-images.githubusercontent.com/92580505/232258806-5453bde3-d92a-42ad-b226-30a45c6624be.png)\n\n\u003c!-- ## Code scaffolding\n\nRun `ng generate component component-name --project phoneInput` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project phoneInput`.\n\u003e Note: Don't forget to add `--project phoneInput` or else it will be added to the default project in your `angular.json` file.\n\n## Build\n\nRun `ng build phoneInput` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Publishing\n\nAfter building your library with `ng build phoneInput`, go to the dist folder `cd dist/phone-input` and run `npm publish`.\n\n## Running unit tests\n\nRun `ng test phoneInput` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fphone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbgm%2Fphone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fphone-input/lists"}