ng-phone-input-ibrahim-usman

Beginner-friendly Angular phone input component with:

• country dropdown
• dial code handling
• masked number typing
• two-way binding with [(value)]

Author

Ibrahim Usman (MSCS)
Email: [email protected]

1) Prerequisites

Make sure your app has:

• Angular 16+
• Node.js + npm

2) Install in Your Angular App

npm i ng-phone-input-ibrahim-usman ngx-mask

3) Configure ngx-mask (Required)

Open your app.module.ts and add provider:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IConfig, provideEnvironmentNgxMask } from 'ngx-mask';

const maskConfig: Partial<IConfig> = { validation: false };

@NgModule({
  imports: [BrowserModule],
  providers: [provideEnvironmentNgxMask(maskConfig)],
  bootstrap: []
})
export class AppModule {}

4) Import Library Module

In the module where you want to use phone input:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PhoneInputLibModule } from 'ng-phone-input-ibrahim-usman';

@NgModule({
  imports: [CommonModule, PhoneInputLibModule]
})
export class SharedModule {}

5) Use Component (Copy/Paste)

Component TS

phoneNumber = '';

Component HTML

<iu-phone-input
  id="phoneNumber"
  name="phoneNumber"
  [(value)]="phoneNumber">
</iu-phone-input>

<p>Selected value: {{ phoneNumber }}</p>

6) Component API

Inputs

• id: string
• name: string
• label: string
• value: string

Output

• valueChange: EventEmitter<string>

Behavior

• Default country is US (+1)
• If local number is empty, emitted value is empty string
• When country changes, input clears for fresh entry

7) Publish to npm (For Package Owner)

From project root:

ng build phone-input-lib
cd dist/phone-input-lib
npm publish --access public

Package URL after successful publish:

https://www.npmjs.com/package/ng-phone-input-ibrahim-usman

8) Common Errors (Quick Fix)

NullInjectorError related to mask

You forgot provideEnvironmentNgxMask(...) in AppModule providers.

Component not recognized (iu-phone-input)

You forgot importing PhoneInputLibModule in the current module.

Package not found on npm

Package is not published yet, or name/version is different.

Suggestions

Suggestions are always welcome.
Share feedback and I will improve the package in the next release.