CODEWITHSUNDEEP
angularangular-pipe
Learning
Learning

Reputation: 1413

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?

Upvotes: 0

Views: 3604

Answers (3)

mak15
mak15

Reputation: 438

Titlecase pipe requires the CommonModule from @angular/common to be included. Could you please check if you have added that module?

Upvotes: 0

joshvito
joshvito

Reputation: 1563

how about trying?

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

Upvotes: 1

Rafael
Rafael

Reputation: 7746

To use TitleCasePipe, or any other pipe that expects a sync value, with async data, unwrap the resolved/emitted data with AsyncPipe (works with both Promise and Observable):

<p>Balance: {{bitcoin$ | async | titlecase}}</p>

Upvotes: 0

Related Questions