Angular - Custom pipe not working?

Question

I am attempting to create a custom pipe that will replace one character with another (use case: replacing hyphenated words with space separated words), but I cannot seem to get it working after following online guides and the Angular docs.

stackblitz

pipe.ts

@Pipe({
  name: 'replace'
})
export class ReplacePipe implements PipeTransform {

  transform(value: string, replace: string, withThis: string): any {
    return value.replace(replace, withThis);
  }

}

html usage

<!-- hyphenate = 'some-hyphenated-string' -->

<div>{{hyphenated | replace: {replace: '-', withThis: ' '} }}</div>

Possible duplicate of How do I call an Angular 2 pipe with multiple arguments? — AmmoPT
– AmmoPT, Commented Aug 29, 2018 at 14:16
is there a reason for not just using the replace method inline with the html? {{hyphenated.replace('-', ' ')}} — jtate
– jtate, Commented Aug 29, 2018 at 14:18
@jtate That would reevaluate the replacement in every change detection cycle. (pure) pipes cache the result. — Ingo Bürk
– Ingo Bürk, Commented Aug 29, 2018 at 14:22

AmmoPT · Accepted Answer · 2018-08-29 14:22:01Z

2

1) You're not calling your custom pipe correctly:

Instead of:

<div>{{hyphenated | replace: {replace: '-', withThis: ' '} }}</div>

Use:

<div>{{hyphenated | replace: '-': ' '}}</div>

2) Your replace usage only replaces the first occurrence in the string:

Instead of:

return value.replace(replace, withThis);

Use:

return value.replace(new RegExp(replace, 'g'), withThis);

Updated stackblitz

answered Aug 29, 2018 at 14:22

AmmoPT

9681 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

physicsboy Over a year ago

Thank you for the pointers :-) I knew I was going wrong somewhere!

AmmoPT Over a year ago

@physicsboy Please consider accepting the answer if it indeed answered your question.

physicsboy Over a year ago

I had to wait for the time limit :P

Collectives™ on Stack Overflow

Angular - Custom pipe not working?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related