phone-number.component.ts

import { Component, OnInit } from '@angular/core';
import { isValidPhoneNumber, parsePhoneNumber} from 'libphonenumber-js';

import { phoneNumbers } from './phone-numbers';

export interface Profile {
    firstName?: string;
    lastName?: string;
    org?: string;
    orgTitle?: string;
    addressLine1?: string;
    addressLine2?: string;
    city?: string;
    zipCode?: string;
    stateProvince?: string;
    country?: string;
    tel?: string;
};

@Component({
  selector: 'app-phone-number',
  templateUrl: './phone-number.component.html',
  styleUrls: ['./phone-number.component.scss'],
})
export class PhoneNumberComponent  implements OnInit {
  phoneNumbers = phoneNumbers;
  profile: Profile = {};
  
  constructor() { }
  
  ngOnInit() { }
  
  countryCode = "";
  parsePhoneNumber() {
    this.countryCode = "";
    if (this.profile.tel && isValidPhoneNumber(this.profile.tel)) {
      const phoneNumber = parsePhoneNumber(this.profile.tel)
      if (phoneNumber?.country) {
        this.countryCode = phoneNumber.country;
      }
    }
  }
}