How to use document.write in Angular 2

Question

In my normal HTML page I am having a simple 4 line code shown below:

<script>
var getData = JSON.parse(localStorage.getItem("templateType"));
document.write(getData.template_code); // in angular its wriiten as getData["template_code"]
console.log(getData.template_code);
document.getElementById("main-wrapper").innerHTML = getData.template_code;
</script>

How can I do the same in Angular 2, I have a component webview.component.html and webview.component.ts?

you can include the script block in your webview.component.html — karthick, May 25 '17 at 05:51
This is reported below to be a reasonable duplicate: [How to inject Document in service?](https://stackoverflow.com/questions/37521298/how-to-inject-document-in-service) — halfer, Mar 28 '20 at 09:54

Luillyfe · Answer 1 · 2017-05-25T08:38:54.910

2

You can import document object inside your angular component in this way:

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

So you use it:

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: any) {
      document.write(getData.template_code);
  }
}

There is a pretty similar question here.

edited May 25 '17 at 08:38

answered May 25 '17 at 07:36

Luillyfe

6,183
8
36
46

this solution looks like of angular 1 , i need a solution for angular 2 – user2828442 May 25 '17 at 08:27
@user2828442 then tag your question with Angular 2's `angular` tag, not `angularjs` – neptune May 25 '17 at 08:43
2

@user2828442: This is an Angular 2+ solution. Angular 1 doesn't have annotations, or the `@angular` package namespace. – Joe Clay May 25 '17 at 08:43

How to use document.write in Angular 2

1 Answers1