Скачать или смотреть Passing generic Pipe that implements PipeTransform in Angular

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Passing generic Pipe that implements PipeTransform in Angular

I have a bunch of custom pipes like this:
@Pipe({ name: 'appPadThree', pure: true, standalone: true })
@Injectable()
export class PadThreePipe implements PipeTransform {
transform(value: number): string {
// Code
}
}

@Pipe({ name: 'appPadThree', pure: true, standalone: true })
@Injectable()
export class PadThreePipe implements PipeTransform {
transform(value: number): string {
// Code
}
}

I'm trying to write a generic function to use .transform() but .transform() doesn't exist on type Pipe.
.transform()
transform()
Attempt 1:
pipeData T (value: string, pipeName: T): string {
const pipeWorker = inject(pipeName);
return pipeWorker.transform(value);
}

pipeData T (value: string, pipeName: T): string {
const pipeWorker = inject(pipeName);
return pipeWorker.transform(value);
}

Attempt 2:
pipeData T extends PipeTransform (value: string, pipeName: T): string {
return pipeRef.transform(value);
}

pipeData T extends PipeTransform (value: string, pipeName: T): string {
return pipeRef.transform(value);
}


Error: Argument of type 'Pipe' is not assignable to parameter of type
'PipeTransform'. Property 'transform' is missing in type 'Pipe' but
required in type 'PipeTransform'.

Error: Argument of type 'Pipe' is not assignable to parameter of type
'PipeTransform'. Property 'transform' is missing in type 'Pipe' but
required in type 'PipeTransform'.
This code worked prior to the Angular 18 / standalone upgrade. It didn't use generics and was ugly.
pipeData(value: any, pipeName: any): any {
const pipeWorker = this.injector.get(pipeName);
return pipeWorker.transform(value);
}

pipeData(value: any, pipeName: any): any {
const pipeWorker = this.injector.get(pipeName);
return pipeWorker.transform(value);
}

How can I write a generic function that takes a Pipe as the type, knowing that it implements PipeTransform?
EDIT
The caller gets a little complicated. I have an interface that looks like this:
EDIT
export interface ITableViewer {
...
displayPipe?: Pipe;
}

export interface ITableViewer {
...
displayPipe?: Pipe;
}

My object looks like this:
{ ... displayPipe: PadThreePipe },

{ ... displayPipe: PadThreePipe },

And the caller:
this.pipeData(displayString, pipeName);

this.pipeData(displayString, pipeName);



Tags: angular,typescriptSource of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/