1

I'm integrating GrapesJS with Lory slider into angular 7, and I need to load inline scripts that the editor generates to give functionality to the slider.

I need to load dynamically components inside the HTML that's why I use "dynamic-html" component.

I've tried to reload the scripts with directives but nothing works, it seems that Angular can't find the element.

TS

@Component({
  selector: 'app-paginas',
  styleUrls: ['./paginas.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
  template : `<dynamic-html [content]="pagina.html"></dynamic-html>`
})

Script that editor returns inside "pagina.html"

<script>var items = document.querySelectorAll('#ixuhz');        for (var i = 0, len = items.length; i < len; i++) {          (function(){var e=this,t="https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.3.4/lory.min.js",l=["0","false"],s="";s="true"==s?1:parseInt(s,10);var a={slidesToScroll:parseInt("1",10),enableMouseEvents:l.indexOf("")>=0?0:1,infinite:!isNaN(s)&&s,rewind:!(l.indexOf("")>=0),slideSpeed:parseInt("300",10),rewindSpeed:parseInt("600",10),snapBackSpeed:parseInt("200",10),ease:"ease",classNameFrame:"gjs-lory-frame",classNameSlideContainer:"gjs-lory-slides",classNamePrevCtrl:"gjs-lory-prev",classNameNextCtrl:"gjs-lory-next"},r=function(){window.sliderLory=lory(e,a)};if("undefined"==typeof lory){var n=document.createElement("script");n.src=t,n.onload=r,document.head.appendChild(n)}else r()}.bind(items[i]))();        }</script>

Expecting get some result but not find anything

Slider Without Script Loading

Trying to get the element with Jquery or JS

ngAfterViewInit(){
  console.log($("#ixuhz"));
}
Gerard López Guillén
  • 11
  • 4

1 Answers1

0

you can use import {DomSanitizer} from '@angular/platform-browser' to sanitaze dynamic data added into template.

But i think need to use it like this <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(content)"></div>

Here is link to document

Anton M.
  • 472
  • 4
  • 14