Getting started with Angular 2 Dynamically add components using ViewContainerRef.createComponent Pipes Routing (3.0.0+)Http Interceptor Directives Installing 3rd party plugins with [email protected]Testing an Angular 2 App Routing Optimizing rendering using ChangeDetectionStrategy Lifecycle Hooks Directives & components : @Input @Output Angular RXJS Subjects and Observables with API requests Zone.js Services and Dependency Injection Angular 2 Forms Update Detecting resize events Bootstrap Empty module in angular 2 Advanced Component Examples Bypassing Sanitizing for trusted values Angular2 Custom Validations Angular 2 Data Driven Forms Angular - ForLoop Feature Modules Angular2 In Memory Web API Ahead-of-time (AOT) compilation with Angular 2 Debugging Angular2 typescript application using Visual Studio Code CRUD in Angular2 with Restful API Component interactions Use native webcomponents in Angular 2 Lazy loading a module Update typings Mocking @ngrx/Store How to use ngfor ngrx Animation Commonly built-in directives and services How to Use ngif Testing ngModel Create an Angular 2+ NPM package Angular2 CanActivate Angular 2 - Protractor Example for routes such as /route/subroute for static urls Angular2 Input() output()Page title unit testing Angular-cli OrderBy Pipe Angular2 Animations Angular 2 Change detection and manual triggering Angular2 Databinding Brute Force Upgrading EventEmitter Service Angular2 provide external data to App before bootstrap Using third party libraries like jQuery in Angular 2 Component interactions Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.Templates Configuring ASP.net Core application to work with Angular 2 and TypeScript Angular2 using webpack Angular material design Dropzone in Angular2 custom ngx-bootstrap datepicker + input angular redux Creating an Angular npm library Barrel angular-cli test coverage Service Worker Components Modules

Bypassing Sanitizing for trusted values

Remarks:

SUPER IMPORTANT!

DISABLING SANITIZING LEAVES YOU AT RISK OF XSS (Cross-Site Scripting) AND OTHER ATTACK VECTORS. PLEASE MAKE SURE YOU TRUST WHAT YOU'RE GETTING 100%

Using Pipes relegates you to only changing attribute values like so :

<tag [attribute]="expression or variable reference | pipeName">

you are not able to use pipes this way :

<tag attribute="expression or variable reference | pipeName">

or this way

<tag attribute={{expression or variable reference | pipeName}}

Bypassing Sanitizing with pipes (for code re-use)

Project is following the structure from the Angular2 Quickstart guide here.

RootOfProject
|
+-- app
|   |-- app.component.ts
|   |-- main.ts
|   |-- pipeUser.component.ts
|   \-- sanitize.pipe.ts
|
|-- index.html
|-- main.html
|-- pipe.html

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

This finds the index.html file in the root of the project, and builds off of that.

app.component.ts

import { Component } from '@angular/core';
import { PipeUserComponent } from './pipeUser.component';

@Component({
    selector: 'main-app',
    templateUrl: 'main.html',
    directives: [PipeUserComponent]
})

export class AppComponent { }

This is the top level component that groups other components that are used.

pipeUser.component.ts

import { Component } from '@angular/core';
import { IgnoreSanitize } from "./sanitize.pipe";

@Component({
    selector: 'pipe-example',
    templateUrl: "pipe.html",
    pipes: [IgnoreSanitize]
})

export class PipeUserComponent{
    constructor () { }        
    unsafeValue: string = "unsafe/picUrl?id=";
    docNum: string;

    getUrl(input: string): any {
        if(input !== undefined) {
            return this.unsafeValue.concat(input);
            // returns : "unsafe/picUrl?id=input"
        } else {
            return "fallback/to/something";
        }
    }
}

This component provides the view for the Pipe to work with.

sanitize.pipe.ts

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

@Pipe({
    name: 'sanitaryPipe'
})
export class IgnoreSanitize implements PipeTransform {

   constructor(private sanitizer: DomSanitizationService){}

   transform(input: string) : any {
       return this.sanitizer.bypassSecurityTrustUrl(input);
   }

}

This is the logic that describes what the pipe formats.

index.html

<head>
    Stuff goes here...
</head>
<body>
    <main-app> 
        main.html will load inside here.
    </main-app>
</body>

main.html

<othertags> 
</othertags>

<pipe-example>  
    pipe.html will load inside here.
</pipe-example>

<moretags>
</moretags>

pipe.html

<img [src]="getUrl('1234') | sanitaryPipe">
<embed [src]="getUrl() | sanitaryPipe">

If you were to inspect the html while the app is running you would see that it looks like this:

<head>
    Stuff goes here...
</head>

<body>

    <othertags> 
    </othertags>
    
    <img [src]="getUrl('1234') | sanitaryPipe">
    <embed [src]="getUrl() | sanitaryPipe">
    
    <moretags>
    </moretags>

</body>

Parameters:

Params	Details
selector	tag name you reference your component by in the html
template(templateUrl)	a string that represents html which will be inserted wherever the `<selector>` tag is. templateUrl is a path to an html file with the same behavior
pipes	an array of pipes that are used by this component.

Contributors

Topic Id: 5942

Example Ids: 20843

This site is not affiliated with any of the contributors.