0

I am using MdlDialogService in my angular2 project to alert. 

openHelpDialog(){

    let result = this.dialogService.alert("<h5>Welcome to Vision Backlog!</h5>");
    result.subscribe( () => console.log('alert closed') );
}

What could be the best way to insert big HTML inside alert? This alert will serve for me as a Help File.

UPDATE

I created a separate component for Help, it looks like overhead but serves the purpose. However it gives me WARNING: sanitizing HTML stripped some content error

openHelpDialog(){

    let result = this.dialogService.alert("Test"+ "<help-content></help-content>");

}
Thinker
  • 5,326
  • 13
  • 61
  • 137
  • You can try to inject `DomSantitzer` and call `let result = this.dialogService.alert(this.sanitizer.bypassSecurityTrustHtml("Test" + "..."));` like shown in http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Günter Zöchbauer Apr 25 '17 at 08:42
  • I already have a pipe created for sanitizing, but in that case I will have to write the HTML in my .ts file of help-content, right? – Thinker Apr 25 '17 at 08:53
  • Right . . . . . . – Günter Zöchbauer Apr 25 '17 at 08:54
  • I wanted to avoid writing HTML in .ts file, to avoide writing long html syntax inside alert(), I created separate component that will give the HTML to be inserted. If in that component I again have to write this long HTML in .ts file then it is not too pleasant. Isn't there other way? – Thinker Apr 25 '17 at 08:59
  • Sorry, I don't know. I haven't used MdlDialog. If `` is a component, you won't be able to pass it as a string. Angular won't create a component instance for HTML created that way, only for HTML added statically to a components template. – Günter Zöchbauer Apr 25 '17 at 09:07
  • Okay! thanks anyway :) – Thinker Apr 25 '17 at 09:08

0 Answers0