Adding a new Angular pipe #10235

rvanwoezik created 3 years ago

ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0

I have added a pipe: 'vimeo-url.pipe.ts' in the folder Web.Host\src\shared\common\pipes

import { Injector, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'vimeoUrl'
})

export class VimeoUrlPipe implements PipeTransform {

    _sanitizer: DomSanitizer;

    constructor(injector: Injector) {
        this._sanitizer = injector.get(DomSanitizer);
    }

    transform(value: any, args?: any): any {
        let url = value.replace("vimeo.com/", "player.vimeo.com/video/");

        return this._sanitizer.bypassSecurityTrustResourceUrl(url);

       
    }

}

In the utils.module.ts i'm importing this pipe: import { VimeoUrlPipe } from '@shared/common/pipes/vimeo-url.pipe';

I've add it to the declarations in utils.module.ts and also to the exports

The admin-shared.module.ts imports the utils.module.ts And my courses.module.ts imports the admin-shared.module.ts

When running i get the error "No pipe found with the name 'vimeoUrl'

What am i missing? What is the correct way to add a new pipe?

Thanks in advance

Adding a new Angular pipe #10235

2 Answer(s)