html - Angular 4 Container Element with Dynamic Content - AOT friendly -

i have backend database containing manual topics in html format, including anchors on click function. angular (4.3.5) app has tree of topics, when tree topic clicked topic's body html got backend , displayed next topic tree in container div.

my question how display html page in container div. tried:

<div [innerhtml]="htmlbody | safehtmlpipe"></div> 

this solution did not work because htmlbody contains anchors other pages as:

<a (click)="loadnewpage(topicid)">display topic</a> 

angular sanitizing (filtering out) anchor on click handler.

i have followed many google links on subject dynamically displaying elements containing html (click) functions angular 2. have looked @ wrapper component in dynamic injection in angular 4. failed find actual examples of working code provides loading html dynamic source (ex backend). make use of new ngcomponentoutlet directive , have aot compatible.

does know how achieve this?

since no 1 answered question, here working solution albeit not ideal work perfectly. , aot compliant.

template:

<div id="pagecontainer" [innerhtml]="htmlbody | safehtmlpipe"></div> 

the following code replaces dom anchor hrefs inside pagecontainer click callback:

// use service backend html this.db.get('getpage', pageid) .subscribe(res => {     // load innerhtml page markup     this.htmlpage = res.data;     // short pause (for template [innerhtml] = htmlbody)     settimeout(() => {         // achors children of page container         let pc = document.body.queryselector("#pagecontainer");         let x = pc.queryselectorall('a');         array.from(x).foreach(el => {             // href content             let hr = el.getattribute('href');             if (hr != undefined) {                 // replace href onclick event                 el.setattribute('href', 'onclick=\"link()\"');                 // bind click listener                 el.addeventlistener('click', e => {                     // prevent browser precessing anchor                     e.preventdefault();                     // callback original href content                     this.link(hr);                                   });             }         });         // scroll first h1         pc.getelementsbytagname('h1')[0].scrollintoview();         this.g.showloading = false;     }, 100); });  link(href) {   // call topic on click handler href load new page } 

and sake of completeness, safehtml pipe:

import { pipe, pipetransform } '@angular/core'; import { domsanitizer } '@angular/platform-browser';  // ref: https://stackoverflow.com/questions/39794588/angular2-innerhtml-removes-styling  @pipe({   name: 'safehtmlpipe' })  export class safehtmlpipe implements pipetransform {    constructor(private sanitizer:domsanitizer){}    transform(html) {              return this.sanitizer.bypasssecuritytrusthtml(html);   } }