hide body from different component while printing - Angular

Question

A window containing two components data i.e search component and result component. Based on search criteria, results will display in results component ag-Grid in below of the search criteria component. Now I'm trying to print only ag-grid data through css styles. In css except agGrid, remaining body and all hiding. But the problem is result grid content is hiding but seach criteria content is still visible and overriding with grid data. So how to hide search criteria content from result component.

This is my css in result component:

@media print {
   body * {
      visibility: hidden;
    }
    #myGrid, #myGrid * {
      visibility: visible;
    }
    #myGrid {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

Print functionality in result component ts:

nBtPrint() {
      var gridApi = this.gridApi;
      this.setPrinterFriendly(gridApi);
      setTimeout(() => {
        this.setNormal(gridApi);
      }, 2000);
    }
    setPrinterFriendly(api) {
      api.setDomLayout("print");
    }
  setNormal(api) {
      window.close();
      api.setDomLayout(null);
    }

Fredrik_Borgstrom Fredrik_Borgstrom · Accepted Answer · 2019-01-22T19:29:20

It's difficult to say without seeing the full source code, like the html-template for instance.

But try to use

display: none

instead of visibility: hidden in your CSS.

Setting the display to none will remove an element from the layout, which is not the case with the visibility property set to hidden.

hide body from different component while printing - Angular

1 Answers