Angular 6 {pipe} - How to format a phone number and subStr string.

Step 1: Create Pipe with name 'subStr' and 'phoneFormat' with the help of the following command.

• ng g pipe subStr
• ng g pipe phoneFormat

Step 2: Copy and paste the below code at 'sub-str.pipe.ts'.

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

@Pipe({

  name: 'subStr'

})

export class SubStrPipe implements PipeTransform {

  transform(_strValue: string, args: string[]): any {

    if (args != undefined) {

      const limit = args.length > 0 ? parseInt(args[0], 10) : 15;

      const trail = args.length > 1 ? args[1] : '...';

      return _strValue.length > limit ? _strValue.substring(0, limit) + trail : _strValue;

    }

    else {

      const limit = 15;

      const trail = '...';

      return _strValue.length > limit ? _strValue.substring(0, limit) + trail : _strValue;

    }

  }
}                                                                                   

Step 3: Copy and paste the below code at 'phone-format.pipe.ts'.

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

@Pipe({ name: 'phoneFormat' })

export class PhoneFormatPipe implements PipeTransform {

    transform(_phone: string): string {         

        let phone = _phone;

        if (_phone != null && _phone != "") {

            let flag = _phone.includes('-');

            if (!flag) {

                phone = _phone.slice(0, 3) + '-' 

                + _phone.slice(3, 6) + '-' 

                + _phone.slice(6, 11);

            }

        }

        return phone;

    }
}                                                                                   

Step 4: The above pipes are automatically declared in 'app.module.ts' as shown in the image.

Step 5:  Generate 'testPipe' component with the following code.

• ng g c testPipe

Step 6:  Copy and paste the below code at 'test-pipe.component.html'.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container" style="margin: 10px;">

<div class="col-6 mt-1">

<table class="table table-striped">

  <thead class="thead-dark">

    <tr>

      <th scope="col">#</th>

      <th scope="col">First</th>

      <th scope="col">Last</th>

      <th scope="col">Phone</th>

      <th scope="col">Details</th>

    </tr>

  </thead>

  <tbody>

    <tr *ngFor="let row of EmpDetails;">

      <th scope="row">1</th>

      <td>{{row.FirstName}}</td>

      <td>{{row.LastName}}</td>

      <td>{{row.Phone  | phoneFormat}}</td>

      <td placement="bottom" [ngbTooltip]="row.Details">{{row.Details  | subStr:[25,'....'] }}</td>

    </tr> 

   

  </tbody>

</table>
</div>

</div>

Step 7: Copy and paste the below code at 'test-pipe.component.ts'.

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-test-pipe',

  templateUrl: './test-pipe.component.html',

  styleUrls: ['./test-pipe.component.css']

})

export class TestPipeComponent implements OnInit {

  public EmpDetails = []

  constructor() { } 

  ngOnInit() {

    this.EmpDetails = [

      {

        FirstName:'Mark',

        LastName:'Otto',

        Phone : '123456789',

        Details:'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to  times on purpose (injected humour and the like).'

      },

      {

        FirstName:'Mary',

        LastName:'Mary',

        Phone : '9632587410',

        Details:'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to  times on purpose (injected humour and the like).'

    

      },

      {

        FirstName:'July',

        LastName:'Dooley',

        Phone : '8963648018',

        Details:simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'

    

      },

    ]

  }

}

Step 8: Output.