Global Custom Angular Pipe Causing Template Parse Error

Greetings! I hope the new year is going well for everyone.

I have reason to create a custom Angular pipe which is global to the application. My implementation seems to work during run time, but the Radzen GUI claims the pipe cannot be found and is throwing a template parse error:

This error does not immediately show. It will show after navigating away from the page (In the Radzen design environment) and back again. It will also show on subsequent reloads of the project or the Radzen program.

My implementation is as follows:

A ts code file named 'pipes.custom.ts' has been created in the app directory. It contains the following simple test code:

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'testPipe'
    })

    export class TestPipe implements PipeTransform {
        transform(value: string): any {
            console.log('testPipe executing. . .');
            return 'testPipe executed';
        }
    }

The following is added to 'app.module.ts'

import { TestPipe } from './pipes.custom';

A declaration is also added to 'app.module.ts'

...

@NgModule({
    declarations: [
        ...AppDeclarations, TestPipe
    ] 

...
//code truncated for clarity

For testing I created a page property named 'pTextToConvert', and added a label with its Text property set to ${pTextToConvert | testPipe}

This all seems to work except for the design environment errors noted above. Any ideas? Thanks!

1 Like

Yes, Radzen isn't aware in design time of this custom pipe and will display an error. We do not support custom pipes in design time at the moment.