Directive to solve the problem

[aosaimy]

Dear @btsiders,
I would like first to thank you for pointing me in the right direction. I had the same issue when printing an Ionic app. I totally agree with your solution: adding a CSS variable would not break anything and will solve the problem elegantly.

For the meantime, I have written a directive (the javascript way) that will make an ion-content printable. Anyone can add this directive to app.module.ts (or to a shared module):

  declarations: [
    PrintableDirective,
    ...
  ],

Then you can use it as such:
<ion-content appPrintable>

The directive code is following:

import { Directive, ElementRef, OnInit, Input } from '@angular/core';

@Directive({
    selector: 'ion-content[appPrintable]'
})
export class PrintableDirective implements OnInit {
    constructor(private el: ElementRef) {
    }

    ngOnInit(count = 0) {
        if (count > 10) {
            return;
        }
        // if ion-content is not initilized yet, re-run this method one second later
        if (this.el.nativeElement.shadowRoot.children.length === 0) {
            setTimeout(() => this.ngOnInit(count + 1), 1000);
            return;
        }

        // assign position value to shadowRoot child
        this.el.nativeElement.shadowRoot.children[1].style.position = 'relative';
    }
}