title: Angular - How to apply Angular Pipes to Excel Export
body: <p>In my Angular-13 projects, I have these two pipes: <strong>1. chargeMode</strong>  and  <strong>2. employeeStatus</strong></p>
  <p><strong>chargeMode:</strong></p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'chargeMode'
  })
  export class ChargeModePipe implements PipeTransform {
  
    transform(value: number): string {
      if (value == 1) {
          return 'Fixed';
      }
      if (value == 2) {
        return 'Percentage';
      }
      return 'Fixed';
    }
  }
  </code></pre>
  <p><strong>employeeStatus:</strong></p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'employeeStatus'
  })
  export class EmployeeStatusPipe implements PipeTransform {
  
    transform(value: number): string {
      if (value == 0) {
          return 'Unknown';
      }
      if (value == 1) {
        return 'Inactive';
      }
      if (value == 2) {
        return 'Active';
      }
      return 'Active';
    }
  }
  </code></pre>
  <p>Aalso I have created this interface for the data that would be exported</p>
  <p>interface:</p>
  <pre class="lang-js prettyprint-override"><code>    export interface PageItem {
        id: string;
        firstName: string;
        lastName: string;
        employeeCode: string;
        mobileNumber?: string;
        employeeStatus: number;
      }
      
      export interface IData {
        pageItems: PageItem[];
        pageSize: number;
        currentPage: number;
        numberOfPages: number;
        totalRecord: number;
        previousPage: number;
      }
      
      export interface IEmployeeList {
        data: IData;
        successful: boolean;
        message: string;
        statusCode: number;
      }
  </code></pre>
  <p>I am exporting this data to excel using excel.js:</p>
  <p>Then I have employees.component.ts:</p>
  <pre><code>import { Component, ViewChild, ElementRef, TemplateRef, OnInit } from '@angular/core';
  import { ToastrService } from 'ngx-toastr';
  import { EmployeeService } from 'src/app/features/admin/services/employee.service';
  import { IData, PageItem, IEmployeeList } from 'src/app/features/admin/models/employee/employee-list';
  import { ExcelExportService } from 'src/app/shared/services/excel-export.service';
  
  @Component({
    selector: 'app-employees',
    templateUrl: './employees.component.html',
    styleUrls: ['./employees.component.scss']
  })
  export class EmployeesComponent implements OnInit {
    allEmployeeList: any[] = [];
    employeeData: PageItem[] = this.allEmployeeList;
    constructor(
      private employeeService: EmployeeService,
      private toastr: ToastrService,
      private excelService: ExcelExportService,
    ) { }
  
    ngOnInit(): void {
      this.loadAllEmployees();
      this.excelHeaderColumns = ['First Name', 'Last Name', 'Mobile No.', 'Employee Status', 'Charge Mode'];
    }
  
    loadAllEmployees() {
      this.employeeService.getAllEmployees().subscribe({
        next: (allEmployeeList = res.data.pageItems;
        this.employeeData = res.data.pageItems;
        },
        error: (error) =&gt; {
          this.toastr.error(error.message);
        }
      })
    }
  
    onEmployeeSearch() {
      this.allEmployeeList = this.dataBk.filter(
        (row) =&gt;
          row.firstName
            ?.toLowerCase()
            .includes(this.selectedName?.toLowerCase()) &amp;&amp;
          row.lastName
            ?.toLowerCase()
            .includes(this.selectedName?.toLowerCase())
      );
    }
  
    exportExcel() {
      const newEmployeeList = this.allEmployeeList.map((e) =&gt; {
        return {
          firstName: e.firstName,
          lastName: e.lastName,
          mobileNumber: e.mobileNumber,
          employeeStatus: e.employeeStatus,
          chargeMode: e.chargeMode,
        };
      });
      this.excelService.exportAsExcelFile(
        'Employees List Report',
        'Printed Date : ' + this.datePipe.transform(new Date(), 'medium'),
        '',
        this.excelHeaderColumns,
        newEmployeeList,
        'employee-list-report',
        'Sheet1'
      );
    }
  </code></pre>
  <p>The code above is working. It exports the filtered data to excel. But the issue I have is that it exports numeric values for employeeStatus (0,1 and 2) and chargeMode (1 and 2).</p>
  <p>How do I apply the two pipes (employeeStatus and chargeMode) for the numeric values in the <strong>exportExcel</strong>?</p>
  <p>Thank you</p>