Printing the report

Since the beginning of this chapter we had a printButton property inside the ReportConfig model, but we never used it. We have it inside the configuration UI and if we check the database we can see that there is a valid status for that property, but it does not do anything.

Let's show/hide this button based on its status, create an event listener for it, and print a report page when it is hit. First create a button next to the name of each report template inside the main view:

# src/app/report/report.html 
 #... 
 <li *ngFor="let report of items"> 
   <a data-toggle="tab" href="#{{report.$key}}"> 
     {{report.templateName}}  
     <button *ngIf="report.printButton" type="button"  
       class="btn btn-default btn-xs"  
       (click)="printReport(report.$key)">  
       <span class="glyphicon glyphicon-print" aria-hidden="true"> 
       </span> 
     </button> 
   </a> 
 </li> 
 #... 

Notice that we show the print button...