Cannot read property 'getElementsByTagName' of null while printint content in a hidden div using ngxPrint

Question

• My html

  <div *ngIf="isShown" id="print-section"> 
      <!--Your html stuff that you want to print-->
         
  </div>
        
  <button printTitle="MyTitle"  printSectionId="print-section" ngxPrint>print</button>

• My .ts

ngOnInit() { 
  this.isShown = false;
}

Why can't the div content be printed if I set isShown to false.

Answer 1

The *ngIf is a syntactic sugar for the directive [ngIf]. So your template would actually be expanded to

<ng-template [ngIf]="isShown">
  <div id="print-section"> 
    <!--Your html stuff that you want to print-->
  </div>
</ng-template>

The ng-template is Angular specific implementation of more generic HTML template tag. So as you see when the condition is false, the div isn't hidden like you say but rather not rendered yet. So when you attempt getElementsByTagName, the element isn't available yet.

As a workaround, you could use CSS to hide the element instead of *ngIf. Try the following

<div [style.display]="isShown ? 'block' : 'none'" id="print-section"> 
  <!--Your html stuff that you want to print-->
</div>

Answer 2

Use [hidden]="true" instead of *ngIf="isShown" and it will work.

app.component.html -

<div [hidden]="true" id="print-section"> 
  <h1>HELLO WORLD!!!</h1>
</div>
<button printTitle="MyTitle"  printSectionId="print-section" ngxPrint>print</button>

app.component.ts -

export class AppComponent { }

app.module.ts -

@NgModule({
declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPrintModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json -

"dependencies": {
    "@angular/animations": "~10.1.3",
    "@angular/common": "~10.1.3",
    "@angular/compiler": "~10.1.3",
    "@angular/core": "~10.1.3",
    "@angular/forms": "~10.1.3",
    "@angular/platform-browser": "~10.1.3",
    "@angular/platform-browser-dynamic": "~10.1.3",
    "@angular/router": "~10.1.3",
    "ngx-print": "^1.2.0-beta.5",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.3",
    "@angular/cli": "~10.1.3",
    "@angular/compiler-cli": "~10.1.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

Output -