How to use translate pipe in typescript with Angular

Question

I want to display a translated message when a button is clicked so I need to use the translate pipe in the typescript.

This is my json :

 "newRepair": {
   "intake": {
       "errormessage" : "This is a required field"
      }
     }

This is the function related to the button in TS :

 error : string;
 saveAndGoForUpload(){
   this.error = this.translatePipe.transform("newRepair.intake.errormessage");}

HTML :

<button  (click)="saveAndGoForUpload()" type="button"
     class="btn">PROCEED</button>
 <p>{{error}}</p>

It gives me this error : NullInjectorError: No provider for TranslatePipe!

score 0 · Answer 1 · answered Jan 04 '21 at 16:19

0

If you want to use pipe's transform() method in component, you also need to add CustomPipe to module's providers:

import  { CustomPipe } from '../pipes/custom.pipe';

@NgModule({
  imports:      [ ... ],
  declarations: [ AppComponent, CustomPipe ],
  providers: [CustomPipe],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

answered Jan 04 '21 at 16:19

Nilesh Patel

3,193
6
12

i have given you an example.. You need to import `TranslatePipe.ts` as per its location – Nilesh Patel Jan 05 '21 at 08:36

score 0 · Answer 2 · answered Jan 04 '21 at 16:19

You need to add your custom pipe as a provider in your class component decorator:

import  { CustomPipe } from '../pipes/custom.pipe';

@Component({
    templateUrl: './some.component.html',
    providers: [CustomPipe]
})
export class SomeComponent{
}

Or alternatively at the module level depending on where else you plan on using your pipe.

How to use translate pipe in typescript with Angular

2 Answers2