4

Heres an image to help explain:

Example angular 2 nested components

Long story short, my client wants a printable version of just the red area to show up in a new tab, so they can print it with the browser. (Without the clutter from app.component and AllItems component)

I can't come up with a better solution than having the "All Items" component have a button that exports all of the generated html (because it's dependent on data from "All Items") into its own .html file and opening a direct link to that.

Thank you in advance!

Relevent, but Angular 1: How to use Angular to create n printable pages?

Community
  • 1
  • 1
rgrambo
  • 127
  • 1
  • 1
  • 9
  • I do not get it , You want that a part of the html page would be printed once clicking on a print button for example ? (e.g. some specific
    tag)
     – SeleM Jan 23 '17 at 07:06
  • Possible duplicate of [Print Html template in Angular 2 (ng-print in Angular 2)](http://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2) – SeleM Jan 23 '17 at 07:09
  • Similar issue as the one 5313M linked but slightly different, as that user wants to go straight to print from some html. I want to extract html from an inner component and show it on its own page. My issue could be simplified to something like: "how do I hide all parent component html?". – rgrambo Jan 23 '17 at 18:14

1 Answers1

4

Found the answer, it's a simple javascript thing that I had forgotten.

// Open used in new window
let data = document.getElementsByClassName("Items-Container")[0].innerHTML;
let newWindow = window.open("data:text/html," + encodeURIComponent(data),
  "_blank");
newWindow.focus();

I still need to add the css to it, but if anyone else finds themselves here, this is the solution for me.

EDIT: Using css to hide all of the outside parts is the better way to go.

@media print {
    header nav, footer {
       display: none;
    }
}
rgrambo
  • 127
  • 1
  • 1
  • 9