Search code examples
angulartypescriptliteralsstring-interpolationangular-pipe

Can an object literal be used as a pipe parameter?


I wrote a pipe that takes an object as a parameter:

@Pipe({name: "myPipe"})
export class MyPipe implements PipeTransform {
    transform (value: string, options: any): string {
        // do stuff with value and options here
    }
}

It works fine when I use a variable for options:

<!-- this works fine -->
{{someString | myPipe: someObject}}

But if I try to use a literal instead:

<!-- this doesn't work -->
{{someString | myPipe: {foo: "bar"}}}

I get an amusingly repetitive error in the console:

ERROR Error: "[object Object]"

I assume it's because the object literal doesn't play nice with the interpolation, but I'm not sure how else to write it. Is there a way to accomplish this without having to add a bunch of extra variables to my TypeScript?


Solution

  • Via this GitHub issue

    It works if you wrap the whole expression in parentheses:

    <!-- this works -->
    {{(someString | myPipe: {foo: "bar"})}}
    

    Or if you add a space before the last two braces:

    <!-- this also works -->
    {{someString | myPipe: {foo: "bar"} }}