1

I have a parent form with a button which opens a modal dialog. The html for the modal dialog is:

<div>
    <form class="form-horizontal" >
        <div class="col-md-12">
            <div class="form-group row">
                <label class="col-md-2 col-sm-3">Message:</label>
                <div class="col-md-6">
                    <p class="form-control-static ">Hello</p>
                </div>
            </div>
         </div>   
         <div class="col-md-12">
            <div class="btn-group ">
                <button type="button" class="btn btn-primary" (click)="print()">Print</button>
            </div>
        </div>
    </form>
</div>

The code for the print button in the component is:

public print = (): void => {
    window.print();
  }

But this is printing the content in the parent form also. I want only the content of the modal dialog to be printed. Also I do not want to handle this scenario by using the DOM. So is there a way we can print only the dialog box content without using document.getElementbyID (not using DOM).

The solution suggested in the following URL; How to only show certain parts with CSS for Print?

does not work because if I close the modal dialog and press the ctrl+p button there then it does not print the parent form because we are adding display:none. So on the parent form also print option should be available and when the modal dialog is opened the print option should print only the modal dialog content.

Community
  • 1
  • 1
Valla
  • 2,414
  • 11
  • 42
  • 73
  • 1
    this is usually handled by css media types. Basically make everything but the content you want to print invisible. – toskv Mar 22 '17 at 16:45
  • 1
    Possible duplicate of [How to only show certain parts with CSS for Print?](http://stackoverflow.com/questions/3463796/how-to-only-show-certain-parts-with-css-for-print) – n00dl3 Mar 22 '17 at 16:53
  • here is the working solution [enter link description here](https://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – hasim Apr 18 '18 at 13:01

0 Answers0