Angular2 raw html custom attribute

Question

I want to insert Raw HTML I get from the server, that has custom attributes in some tags. Angular2 strips out the unknown attributes I need to preserve. I am also very open to alternative ways.

Currently angular2 is embedded into the non-angular page (can't change that), and jQuery selects tags based no their custom attributes so i need to preserve them

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `<div [innerHTML]="rawHtml">[custom] attribute not present</div>`,
})
export class App {
  rawHtml = '<span class="class" custom="custom">Text</span>';
}

http://plnkr.co/edit/sKVHUubK0ofUfmSdR5gO?p=preview

Just FYI, I have tried attr.custom, [attr.custom], [custom] without success

yurzui · Accepted Answer · 2016-08-05 15:03:59Z

4

You can use DomSanitizationService to do that

import { DomSanitizationService } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div [innerHTML]="rawHtml"></div>
  `,
  directives: []
})
export class App {
  private _rawHtml: string = '<span class="class" custom="custom">Text</span>';

  public get rawHtml() {
     return this._sanitizer.bypassSecurityTrustHtml(this._rawHtml);
  }

  constructor(private _sanitizer: DomSanitizationService) { }
}

Updated Plunker

answered Aug 5, 2016 at 15:03

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aleksandr Belkin Over a year ago

Thank you so much! Exactly what I need

yurzui Over a year ago

You're welcome! You can also use it as pipe plnkr.co/edit/PZLeyT8qsrbP5WKNA8v0?p=preview

hupf Over a year ago

In Angular 2.0.0-rc.6 it has been renamed to DomSanitizer, see angular.io/docs/ts/latest/api/platform-browser/index/…

Collectives™ on Stack Overflow

Angular2 raw html custom attribute

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related