Question 293486 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to provide pipes in services in Angular 17 with no NgModule

I am trying to use titleCasePipe in my angular service, I don’t have NgModule and using the new ApplicationConfig way.

@Injectable({
  providedIn: 'root'
})
export class NameGeneratorService {
  // private titleCasePipe = inject(TitleCasePipe)
  constructor(private titleCasePipe: TitleCasePipe) { }

I tied both ways for injection ^^

I keep getting NullInjectorError: No provider for _TitleCasePipe! error.

I tried this, still same error

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    importProvidersFrom(TitleCasePipe),
  ]
};
Tags:

2

Answers


  1. 0

    Add the pipe to the providers :

      providers: [
    provideRouter(routes),
    provideAnimations(),
    TitleCasePipe,
  ]

    But honnestly, this is a bad practice.
    Pipes are only meant to be used in templates.

    If you want to inject such feature, it should be trough a service.

    Login or Signup to reply.
  2. 0

    If you check the pipeTitleCase in github you see that you can create a function:

    export function titleCase(input:any)
{
 return !input || input.length === 0
      ? ''
      : input.replace(/wS*/g, (txt) => txt[0].toUpperCase() + 
                                         txt.slice(1).toLowerCase());
}

    And use it instead of pipe

    NOTE: for others pipes like decimalPipe, datePipe, etc, you have the functions formatNumber, formatDate… and it’s not necessary import the pipe else the function from @angular/common

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search