How can I print a single component in Angular?

Question

In a single angular component I wish have a print button which when the user clicks, will print a single div from my component's template.

I know this answer works, I've tried it. But I do not like how I need to reapply all styles or rewrite all the styles in the <style> head tags.

I really like this answer but I can't get it to work. I think it might have something to do with how classes are renamed after the app has been served/built.

This is how I've implemented the above answer but can't get it to work.

component.ts

onPrint() {
  window.print();
}

component.html

<div class="print">
  <button (click)="onPrint()">Print</button>
  all the stuffs I want to print
</div>

component.scss

@media print {
  :not(.print) {
    display: none !important;
  }
}

How can I get the above answer to work resulting as little code as possible, and retaining the styles applied to the front-end?

I realize how similar the question is to this one but this question was asked almost two years ago and with regards to angular 2. Not quite sure how different it is with regards to angular 6.

Can you show what you tried for the 2nd solution that you say isn't working? Which file did you add the style to? — user184994, Sep 28 '18 at 19:37
Seems to work when I try it on StackBlitz / Chrome https://stackblitz.com/edit/angular-rfy6cj — user184994, Sep 28 '18 at 19:46
For whatever reason it seems to print everything *except* my `div class="print"` element. — gh0st, Sep 28 '18 at 19:51
When I try that Stackblitz, the only bit that shows in the print preview is `all the stuffs I want to print` — user184994, Sep 28 '18 at 19:52
the component I'm trying to print *is* in a `mat-tab`, I wonder if that has something to do with it — gh0st, Sep 28 '18 at 19:54
Sure, let's give this a shot https://stackblitz.com/edit/angular-pmysdr — gh0st, Sep 28 '18 at 20:27
Did you find a solution? If so please share it. When trying the below solutions the hidden elements still takes blank space in the print page — Dragolis, Mar 16 '20 at 14:04
I have not. I've noticed the same thing as you. However angular 9 is out so I'm not sure how well the below answers would work until I've tried them. — gh0st, Mar 16 '20 at 19:10

score 4 · Answer 1 · answered Sep 28 '18 at 20:46

The styles in the component CSS will only apply to that individual component, which is why the parent component mat tabs are still showing.

As an alternative, you can add the styles into style.css / styles.scss. The problem with this is that the parent DOM elements (such as body) will be set to display: none as well, so nothing will be visible.

You can instead try using visibility in styles.css like so:

@media print {
  :not(.printMe) {
    visibility: hidden;
  }
}

@media print {
  .printMe {
    visibility: visible
  }
}

Depending on your use case, this may help, although the hidden elements will still take up space on the page.

Here is a fork of the StackBlitz to demonstrate

I tried to add a table and it doesn't work, any idea? https://stackblitz.com/edit/angular-pmysdr-svmhde?file=app/print-me/print-me.component.html — Unknown User, Dec 22 '19 at 09:10

score 0 · Answer 2 · answered Apr 08 '20 at 17:56

0

A simple solution might be to display the div over the page content:

@media print {
 .print {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

answered Apr 08 '20 at 17:56

Valeriy Katkov

33,616
20
100
123

armin sadeghi · Answer 3 · 2022-06-15T05:34:11.513

<div [AppendToPrint]="true">
</div>

each element have AppendToPrint directive will show in print window after call this function

window.print();

@Directive({
  selector: '[AppendToPrint]'
})
export class AppendToPrintDirective implements AfterViewInit {

  private elementIdToPrint: string = 'print';

  isPrinted: boolean = true;
  clone;

  @Input("AppendToPrint")
  set appendToPrint(value: boolean) {
    this.isPrinted = value;
  }


  constructor(private elRef: ElementRef) {
  }

  ngAfterViewInit(): void {
    
    this.cloneElement();

    if (document.getElementById(this.elementIdToPrint)) {

      document.getElementById(this.elementIdToPrint).appendChild(this.clone);
    }
  }
  
  cloneElement(): void {
    this.clone = this.elRef.nativeElement.cloneNode(true);
  }

  ngOnChanges() {
    if (this.isPrinted) {
      this.resetPrint();
    }
    else {
      this.cloneElement();
        document.getElementById(this.elementIdToPrint).innerHTML = '';
        document.getElementById(this.elementIdToPrint).appendChild(this.clone);
      }
  
  }

  //#region == private methods ==

  private resetPrint(): void {
    document.getElementById(this.elementIdToPrint).innerHTML = '';
    this.isPrinted = false;
  }

  ///#endregion
}

score -1 · Answer 4 · answered May 10 '19 at 00:43

The only way that worked for me was to hide all elements aside from the one I am printing. Copying the HTML into a new window (and similar solutions) didn't work for me because of style issues.

The following code requires jQuery to work.

print(triggerElement): void
{
    const toShow = this.hideParentSiblings($('#print-section'));
    $(triggerElement).hide();

    window.print();

    for (const e of toShow)
    {
        e.show();
    }

    $(triggerElement).show();
}

hideParentSiblings(element): any[]
{
    let parent;
    const toShow = [];

    while ((parent = element.parent()).length)
    {
        const visible = parent.siblings().find(':visible');
        toShow.push(visible);
        visible.hide();
        element = parent;
    }

    return toShow;
}

How can I print a single component in Angular?

4 Answers4