Angular: Rendering and Getting the HTML of a Component Dynamically

Question

Render the HTML of a component so that it could be used to open a new tab of the type about:blank (a blank new html page that nothing has to do with the application itself).

Why? To avoid creating the HTML using a string variable as, for example:

var html = '<div>
              <h3>My Template</h3>
              ' + myProperty + ' 
            </div>';

I saw that you can render a component dynamically using ViewContainerRef.createComponent and ComponentFactoryResolver. The problem with this is that the component is rendered inside the view container, in the application. What I would like to do is generate the HTML of that component so that then I can use that HTML to put it wherever I want. (in this case, in the document property of the object given by the window.open() method)

Example:

@Component({
  selector: 'app-component',
  template: `
            <div>
              <h3>My Template</h3>
              {{ myProperty }}
            </div>
          `,
  styleUrls: ['./my.component.less']
})
export class MyComponent{
  myProperty: string;
}

I expect to use it in this way:

//get new window tab
var newTab = window.open('about:blank', '_blank');

//get the HTML of the component

//use it to open the new tab
newTab.document.write(html);

Possible duplicate of [Angular component in a Browser's child window](https://stackoverflow.com/questions/53646015/angular-component-in-a-browsers-child-window) — Christopher Peisert, Oct 02 '19 at 21:04
@ChristopherPeisert I'm looking at the answers there. Tomorrow I'll let you know if those worked for me. Thanks! — HNL, Oct 02 '19 at 21:33

score 3 · Answer 1 · answered Oct 04 '19 at 12:30

It may help other people so I post here what I did and which problems I found. After looking to some solutions, this one worked for me. The problem was then I realize that Angular sanitizes your HTML removing all possible <script> tags. Unfortunately I had like 3 of them. In addition, if you don't want them to be sanitized, you have to use a service called DomSanitizerand use the method bypassSecurityTrustScript (doc) passing the script as a parameter. So the idea of don't 'stringify' the code was gone. Saying that, I used the original approach, where the HTML is stored in a variable then passed as a parameter to window.open

Angular: Rendering and Getting the HTML of a Component Dynamically

1 Answers1