-1

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!

hiba nebli
  • 107
  • 2
  • 18

2 Answers2

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 { }

Nilesh Patel
  • 3,193
  • 6
  • 12
0

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.

Alex
  • 848
  • 6
  • 7