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 — Christopher Peisert
– Christopher Peisert, Commented Oct 2, 2019 at 21:04
@ChristopherPeisert I'm looking at the answers there. Tomorrow I'll let you know if those worked for me. Thanks! — HNL
– HNL, Commented Oct 2, 2019 at 21:33

HNL · Accepted Answer · 2019-10-04 12:30:42Z

3

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

answered Oct 4, 2019 at 12:30

HNL

1031 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Rendering and Getting the HTML of a Component Dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related