Have ideas to improve npm?Join in the discussion! »

    safe-pipe
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    SafePipe

    Resolve your safe content with Angular SafePipe (Demo)

    NPM

    Installation

    1. Install the package via npm install safe-pipe or yarn add safe-pipe
    2. Add SafePipeModule module to NgModule.imports.

    E.g.

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

    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:

    // @file app.module.ts
     
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { SafePipeModule } from 'safe-pipe';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      declarations: [ AppComponent ],
      imports: [
        SafePipeModule,
        BrowserModule
      ]
      bootstrap[ AppComponent ]
    })
    export class AppModule { }
     
    // @file app.component.ts
     
    import { Component } from '@angular/core';
     
    @Component({
      selector: 'app-root',
      template: `
        <div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
        <img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
        <iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
        <pre [innerHTML]="htmlContent | safe: 'html'"></pre>
      `,
      styles: [
        `.pic { display: inline-block; width: 320px; }`,
        `.bg-pic { padding-top: 320px; }`
      ]
    })
    export class AppComponent {
      public htmlContent: string = `<h1>Lorem ipsum dolor sit amet.</h1>`;
      public pictureUrl: string = `https://angular.io/assets/images/logos/angular/angular.svg`;
      public catVideoEmbed: string = `https://www.youtube.com/embed/QH2-TGUlwu4"`;
    }

    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.

    Install

    npm i safe-pipe

    DownloadsWeekly Downloads

    2,541

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    85.7 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar