ngx-safer-url

Angular Pipe to safely bind URLs using DomSanitizer.

✨ Major Features

✅ Sanitizes URLs for safe binding
✅ Prevents Angular security errors
✅ Works with Standalone Components and NgModules
✅ Lightweight and zero dependencies

🚀 Installation

Install the package via npm:

npm install --save ngx-safer-url

or with yarn:

yarn add ngx-safer-url

⚙️ Basic Usage

Import the Component

If you’re using Angular standalone components:

import { SafeUrlPipe } from 'ngx-safer-url';

@Component({
  standalone: true,
  imports: [SafeUrlPipe],
  template: `
    <iframe [src]="videoUrl | ngxSafer"></iframe>
  `,
})
export class DemoComponent {
  videoUrl = 'https://www.youtube.com/embed/xyz';
}

Or import the module in your NgModule:

import { NgxSafeUrlModule } from 'ngx-safer-url';

@NgModule({
  imports: [NgxSafeUrlModule],
})
export class AppModule {}

Template

<a [href]="link | ngxSafer">Visit link</a>

🎯 Compatibility

Angular 17+

Modern browsers

📦 License

MIT © 2025

☕ Buy Me a Coffee

If you find this library helpful, you can support my work:

👉 Buy Me a Coffee

🔑 Keywords

angular, ngx, safe url, sanitizer, angular pipe, bypassSecurityTrustUrl, angular security, safe resource url, dom sanitizer, angular standalone, angular module