Angular 2: pipes - How to format a phone number?

Question

I\'ve searched here and there, and I am not able to find something specific about formatting a phone number.

Currently, I am retrieving phone numbers form a JSON in

Answer 1

When formatting phone numbers from a JSON data service, this was the simplest solution I could think of.

<p>0{{contact.phone.home | slice:0:1}}-{{contact.phone.home | slice:1:3}}-{{contact.phone.home | slice:3:5}}-{{contact.phone.home | slice:5:8}}</p>

This will format "25565115" into "02-55-65-115"

Hope this helps someone!

Answer 2

Building on "user5975786", here is the same code for Angular2

import { Injectable, Pipe } from '@angular/core';

@Pipe({
    name: 'phone'
})

export class PhonePipe
{
    transform(tel, args)
    {
        var value = tel.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return tel;
        }

        var country, city, number;

        switch (value.length) {
            case 10: // +1PPP####### -> C (PPP) ###-####
                country = 1;
                city = value.slice(0, 3);
                number = value.slice(3);
                break;

            case 11: // +CPPP####### -> CCC (PP) ###-####
                country = value[0];
                city = value.slice(1, 4);
                number = value.slice(4);
                break;

            case 12: // +CCCPP####### -> CCC (PP) ###-####
                country = value.slice(0, 3);
                city = value.slice(3, 5);
                number = value.slice(5);
                break;

            default:
                return tel;
        }

        if (country == 1) {
            country = "";
        }

        number = number.slice(0, 3) + '-' + number.slice(3);

        return (country + " (" + city + ") " + number).trim();
    }
}

Answer 3

I just bumped myself on this article showing how to do that using a Google's lib called libphonenumber. It seems they use this lib in many different languages and has a very wide support (the link is just to the JS package version). Here's how I've implemented it to portuguese / brazilian phone numbers:

First:

npm i libphonenumber-js

Then:

# if you're using Ionic
ionic generate pipe Phone

# if you're just using Angular
ng generate pipe Phone

Finally:

import { Pipe, PipeTransform } from '@angular/core';
import { parsePhoneNumber } from 'libphonenumber-js';

@Pipe({
  name: 'phone'
})
export class PhonePipe implements PipeTransform {

  transform(phoneValue: number | string): string {
    const stringPhone = phoneValue + '';
    const phoneNumber = parsePhoneNumber(stringPhone, 'BR');
    const formatted = phoneNumber.formatNational();
    return formatted;
  }

}

You can implement many different ways with this lib. There's many, many handy methods on it, you can just go reading and see how it suits you.

Thumbs up if you've liked. =]

Answer 4

You may use something like that in a custom Angular2 pipe:

switch (value.length) {
        case 10: 
            country = 1;
            city = value.slice(0, 3);
            number = value.slice(3);
            break;

        case 11: 
            country = value[0];
            city = value.slice(1, 4);
            number = value.slice(4);
            break;

        case 12: 
            country = value.slice(0, 3);
            city = value.slice(3, 5);
            number = value.slice(5);
            break;

        default:
            return tel;
    }

Check this AngularJS out for more info, but as I said you need to convert it to Angular2:

http://jsfiddle.net/jorgecas99/S7aSj/

Answer 5

StackBlitz

pipe implementation in TS would look like this

import { Pipe } from "@angular/core";

@Pipe({
  name: "phone"
})
export class PhonePipe {
  transform(rawNum) {
    rawNum = rawNum.charAt(0) != 0 ? "0" + rawNum : "" + rawNum;

    let newStr = "";
    let i = 0;

    for (; i < Math.floor(rawNum.length / 2) - 1; i++) {
      newStr = newStr + rawNum.substr(i * 2, 2) + "-";
    }

    return newStr + rawNum.substr(i * 2);
  }
}

---

Declare the PhonePipe in your NgModule's declarations

---

Usage:

import {Component} from 'angular/core';

@Component({
  selector: "my-app",
  template: `
    Your Phone Number: <input [(ngModel)]="myNumber" />
    <p>
      Formatted Phone Number: <b>{{ myNumber | phone }}</b>
    </p>
  `
})
export class AppComponent {
  myNumber = "25565115";
}

There are many things that can be improved, I just made it work for this particular case.