angular 12 custom pipe by fetch data throw service and return string instead of number

Question

Hi Every Mind I have this problem

import { Pipe, PipeTransform } from '@angular/core';
import { PrintingTypesService } from 'src/app/settings/services/printing-types/printing-types.service';
import { PrintingTypesModel } from 'src/app/settings/share/printing-types.model';

@Pipe({
  name: 'printingTypesPipe',
})
export class PrintingTypesPipePipe implements PipeTransform {
  public printingTypesData: PrintingTypesModel[] = [];
  name: any;
  constructor(private printingTypesService: PrintingTypesService) {}

  transform(value: string): any {
    this.printingTypesService.fetchPrintingTypes().subscribe((data) => {
      this.printingTypesData = data;
      const noon = this.printingTypesData.find((o: any) => {
        return Number(o.printing_type_id) === Number(value);
      });
      this.name = '';
      this.name = noon!.name_e;
    });
      return this.name;
  }
}

When I console log this.name it give me string but this string did not appear in browser!!

I Tried but I did not find the main problem? Thanks A lot for your Help :)

this is simple because fetchPrintingTypes return an observable(async means here) .when the transform function of the pipe call , at this time name variable has no value and it is undefined and it will return undefined and after some period of time fetchPrintingTypes return the value.I refer you to visit this link for more information. https://stackoverflow.com/questions/54134175/transform-pipe-in-angular-6-with-observable-or-promise — Mohammadreza Mohammadi, Dec 01 '21 at 16:11

score 2 · Accepted Answer · answered Dec 01 '21 at 16:15

change your transform function to return observable like this

  transform(value: string): any {
    return this.printingTypesService.fetchPrintingTypes().pipe(map(data) => {
      this.printingTypesData = data;
      const noon = this.printingTypesData.find((o: any) => {
        return Number(o.printing_type_id) === Number(value);
      });          
      return noon!.name_e;
    });
  }

and in your template use async pipe after printingTypesPipe pipe.for example

{{ 'test' | printingTypesPipe | async }}

I have Another Question its near this above How Can I take number array and return it works like this {{3,2,5,6,null,null},{7,8,5,9,3,2}} and return {{flex,reload,tre,bannar},{taken,board,t,e,w,s}} — Asim Al-Bakali, Dec 02 '21 at 12:46

angular 12 custom pipe by fetch data throw service and return string instead of number

1 Answers1