Awesome

SafePipe

Resolve your safe content with Angular SafePipe (Demo)

Compatibility

This package is compatible with angular >=17.

For angular >=13 use safe-pipe@2.0.5-0.

For angular <13 use safe-pipe@1.0.4

Installation

1. Install the package via npm install safe-pipe or yarn add safe-pipe
2. Add SafePipe standalone to Component.imports.

E.g.

@Component({
  standalone: true,
  imports: [ SafePipe ]
})
export class MyComponent { }

Usage

The SafePipe pipe accepts a value and sanitization type.

<elem [prop]="value | safe: sanitizationType"></elem>

You can sanitize any resource type supported by DomSanitizer.

Supported sanitization types:

• 'html' - uses DomSanitizer.bypassSecurityTrustHtml (docs)
• 'style' - uses DomSanitizer.bypassSecurityTrustStyle (docs)
• 'script' - uses DomSanitizer.bypassSecurityTrustScript (docs)
• 'url' - uses DomSanitizer.bypassSecurityTrustUrl (docs)
• 'resourceUrl' - uses DomSanitizer.bypassSecurityTrustResourceUrl (docs)

🔗 Full usage example.

Here're the previous package's version examples:

• Demo v2
• Demo v1

Development

This library was generated with Angular CLI version 9.0.7.

Code scaffolding

Run ng generate component component-name --project safe-pipe to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project safe-pipe.

Note: Don't forget to add --project safe-pipe or else it will be added to the default project in your angular.json file.

Build

Run ng build safe-pipe to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build safe-pipe, go to the dist folder cd dist/safe-pipe and run npm publish.

Running unit tests

Run ng test safe-pipe to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.