1

I need to get a value of strings in a hidden div from inside an angular app. Here is what I have:

<iframe id="sample">
    <html>
        <head></head>
        <body>
            <div id="testString" display="none;">string </div>
            <app></app>
        </body>
    </html>
</iframe>

How can I access the value of div testString inside the Angular app in non root component? tried with these and get null:

window.parent.document.getElementById('testString').textContent
document.getElementById('testString').textContent

Can it be done with ElementRef? Also how can I secure this string against injection and xss attacks?

Thanks

AlreadyLost
  • 767
  • 2
  • 13
  • 28

1 Answers1

0

Angular is just Javascript (well, typescript which is also just Javascript with types). So you can do the exact same thing in Angular as you would in raw Javascript, just put it under a ngOnInit method in the component so that document has loaded. If you've used jQuery, this is basically the equivilant of $(document).ready().

For the record, I'm not saying that there wouldn't be a more "Angular" way to accomplish what you're asking. ElementRef would also work, as it's basically just a wrapper around document.getElement*. My point is that you don't need to write anything special just because you're using Angular.

nmg49
  • 1,356
  • 1
  • 11
  • 28