How to specify which pipe to use if multiple modules exported same name pipes?

Question

In my project, I'm using NgxExtendedPdfViewerModule & TranslateModule(@ngx-translate/core). Both packages export translate pipe.

The translate pipe from NgxExtendedPdfViewerModule returns Promise<string>. And, the translate pipe from TranslateModule returns string.

In a module I have to use both to show some pdfs. Now, how do I specify which pipe to use?

Answer 1

imports can also be renamed

import { translate as translate1 } from "./NgxExtendedPdfViewerModule";
import { translate as translate2 } from "./TranslateModule";

Answer 2

Try This

import { Pipe } from '@angular/core';
import { translate as translate1 } from "./NgxExtendedPdfViewerModule";
import { translate as translate2 } from "./TranslateModule";

@Pipe({ name: 'translate1' })
export class Translate1Pipe extends translate1 { }

@Pipe({ name: 'translate2' })
export class Translate2Pipe extends translate2 { }

Declare the Pipes in Modules and use it inside template

<h1>{{'TEST'| translate1}}</h1>
<h1>{{'TEST2'| translate2}}</h1>