Angular 2 printing a component

Question

In plain JavaScript, you are able to print an element by getting the element ID, putting it in a new window, and using window.print().

What is the "Angular 2" way to do such a thing? I have gotten as far as getting a ViewChild of the component I wish to print, but I'm not sure how to access its html and subsequently print it, or if that's even what I'm supposed to do.

Answer 1

If you need to print some custom HTML, this method doesn't need a new window.

ts:

    let control_Print;

    control_Print = document.getElementById('__printingFrame');

    let doc = control_Print.contentWindow.document;
    doc.open();
    doc.write("<div style='color:red;'>I WANT TO PRINT THIS, NOT THE CURRENT HTML</div>");
    doc.close();

    control_Print = control_Print.contentWindow;
    control_Print.focus();
    control_Print.print();

html:

<iframe title="Lets print" id="__printingFrame" style="width: 0; height: 0; border: 0"></iframe>