angular 2 generating part of html from cms service

Question

So I have some part of page from CMS, I am using simple http serivce to fetch data and display it on page. But problem is that for development stage I want to have mocked those services.

public getComponentHtml(componentKey: string): Observable<string> {
 if (this.envName === 'dev') {
    return Observable.of('<h1>{{isLogged()}}</h1>')
 }
 return this.http.get('cms?key=' + componentKey)
  .map((response: Response) => response.json())
  .map((data: any) => {
    return data.componentHtml;
  });
}

data from service is placed in innerHtml tag:

1 is logged user from cms: <div [innerHtml]="menu"></div>
2 is logged user from pure html {{isLogged()}}

output:

1 is logged user from cms: {{isLogged()}} //here we got h1, so html works fine, but angular not even eval expression...
2 is logged user from pure html true //true in pure html, shown to be sure that expression is valid

I ve tried even to use:

domSanitizer.bypassSecurityTrustHtml('html in string')//but nothing changed

so in case of mocking htlms angular even dont evaluate expressions. Any ideas?

See also http://stackoverflow.com/questions/40060498/angular-2-1-0-create-child-component-on-the-fly-dynamically — yurzui, Dec 07 '16 at 15:52

score 1 · Answer 1 · answered Dec 07 '16 at 15:54

you can add pipe like

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

add your pipe to your inner html data. like

<div [innerHtml]="menu | sanitizeHtml"></div>

angular 2 generating part of html from cms service

1 Answers1