angular 11 creating custom pipe ( | ) and use it sample project

** pipe gigabyteToMegaByte

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

@Pipe({

  name: 'gigabyteToMegaByte'

})

export class GigabyteToMegaBytePipe implements PipeTransform {

  transform(value: number): number {

    const megabyte = 1024;

    if (!isNaN(value))

    {

      return value * megabyte;

    }

    return value ;

  }

}

** html

<div class="container" >

<div class="row">

    <div class="col-md-3"></div>

    <div class="col-md-6">

        <table id="producttable" class="table  table-striped  table-hover   " >

            <thead class="bg-primary">

                <tr>

                <th scope="col">ID ( | gigabyteToMegaByte)</th>

                <th scope="col">Name( | lowercase)</th>

                <th scope="col">InStock( | date)</th>

                <th scope="col">InStock( | currency)</th>

            </tr>

            </thead>

            <tbody>

            <tr *ngFor="let product of ProductData">

                <td>{{product.productID | gigabyteToMegaByte}}</td>

                <td>{{product.productName | lowercase}}</td>

                <td>{{product.unitsInStock |   date:"MM/dd/yyyy" }}</td>

                <td>{{product.unitsInStock | currency:'₺'}}</td>

            </tr>

        </tbody>

        </table>

    </div>

</div>

</div>