In the html page, there will be a script element which is a static content ( generated from a Django backend) with an ID.

<script id="hello-data" type="application/json">{"hello": "world\\u003C/script\\u003E\\u0026amp;"}</script>

I wanted to get that data in an angular service ( or even component) which would have a simple getElementById is javascript.

const value = JSON.parse(document.getElementById('hello-data').textContent);

I did a lot of searches, found answers pointing to "ViewChild", "@Inject(DOCUMENT)", but none of these works on a 'script' tag.

Any pointers to solution would be really appreciated :)

Edits: Below is what I have tried with DOCUMENT

  constructor(@Inject(DOCUMENT) document: Document) {
    let el = document.getElementById('hello-data'); 
    console.log(el); // This prints null
    //this.data = JSON.parse(el.textContent);

  }

Interestingly, if I tired to access any other element by ID, it works. I see the issue only with script tag.