How to make a print page in Angular 2

Question

Here is an image to help explain:

In short, my client wants the print version of only the red area to appear on a new tab, so they can print it using a browser. (No mess from app.component and AllItems component)

I can’t come up with a better solution, except that the "All Elements" component has a button that exports all the generated html (because it depends on the data from "All Elements") to its own .html file and opening a direct link to it .

Thank you in advance!

Relevant, but angular 1: How to use angular to create n pages to print?

Answer 1

, javascript, .

// 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();

css, - , .

EDIT: css - .

@media print {
    header nav, footer {
       display: none;
    }
}