How to print a page in Angular 4 with TS

Question

I have an web app while in some pages I need to make a printer to print the page but I have a side bar and the rest ist the page for a component, how it is possible to not print the sidebar only this component, I have used in TS this code.

print() {
window.print();
}

Html code starts from this one.

div class="container">
//Here I have all the HTML source

</div>

Answer 1

You can try this solution.

html file

<div class="container" id="component1">
//Here I have all the HTML source

</div>

<div class="container" id="component2">
//Here I have all the HTML source

</div>

<button (click)="printComponent('component1')">Print</button>

ts file

printComponent(cmpName) {
     let printContents = document.getElementById(cmpName).innerHTML;
     let originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}