Search code examples
angularangular-pipe

Angular Pipe titlecase Invalid Pipe Error

I want to apply titlecase pipe with alvis operator and it is not working as expected. While 'number' pipe is working as expected with alvis operator and TitleCasePipe().transform() is also working on the same value.

Option 1: <p>Chain: {{information?.chains | titlecase}}</p>

Throws Below Error:

ERROR Error: InvalidPipeArgument: 'bitcoin' for pipe 'TitleCasePipe'
    at invalidPipeArgumentError (common.js:3953)
    at TitleCasePipe.push../node_modules/@angular/common/fesm5/common.js.TitleCasePipe.transform (common.js:4655)
    at checkAndUpdatePureExpressionInline (core.js:9731)
    at checkAndUpdateNodeInline (core.js:10303)
    at checkAndUpdateNode (core.js:10261)
    at debugCheckAndUpdateNode (core.js:10894)
    at debugCheckRenderNodeFn (core.js:10880)
    at Object.eval [as updateRenderer] (UserMenuComponent.html:8)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872)
    at checkAndUpdateView (core.js:10248)

Option 2: <p>Chain: {{'bitcoin' | titlecase}}</p> Transforms the string value to 'Bitcoin', as expected.

Option 3: console.log(new TitleCasePipe().transform(this.information.chain)); Transforms the variable value 'bitcoin' to 'Bitcoin', as expected.

Option 4: <p>Balance: {{information?.balance | number}}</p> Transforms the variable value 15603911 into 15,603,911, as expected.

How can i use titlecase pipe in html view with async data values?

Solution

  • how about trying?

    <p>Chain: {{ (information?.chains || '') | titlecase}}</p>