title: How to display a button when the DOM is completely rendered
body: <p>I have a page that has 2 grids, and I want to make the button "export excel" visible only after the two grids are completely loaded. This grids are inside of child components as you can see on HTML bellow</p>
  
  <pre><code>&lt;p-tabPanel header="Validated"&gt;
          &lt;input type="button" name="button" value="" [hidden]="!ready"  (click)="showDialog()" title="Export Excel" class="export_Excel_Button"/&gt;
          &lt;gr-report-result-validated-source&gt;&lt;/gr-report-result-validated-source&gt;
          &lt;br&gt;
          &lt;gr-report-result-validated-target&gt;&lt;/gr-report-result-validated-target&gt;
      &lt;/p-tabPanel&gt;
      &lt;p-tabPanel header="Discrepancies"&gt;
          &lt;input type="button" name="button" value=""  title="Export Excel" [hidden]="!ready" (click)="showDialog()" class="export_Excel_Button"/&gt;
          &lt;gr-report-result-discrep-source&gt;&lt;/gr-report-result-discrep-source&gt;
          &lt;br&gt;
          &lt;gr-report-result-discrep-target&gt;&lt;/gr-report-result-discrep-target&gt;
      &lt;/p-tabPanel&gt;
      &lt;p-tabPanel header="GAPS"&gt;
              &lt;input type="button" name="button" value=""  title="Export Excel" [hidden]="!ready" (click)="showDialog()" class="export_Excel_Button"/&gt;
           &lt;gr-report-result-gap&gt;&lt;/gr-report-result-gap&gt; 
      &lt;/p-tabPanel&gt;
  
  </code></pre>
  
  <p>ts</p>
  
  <pre><code>export class ReportResultComponent implements OnInit, AfterViewInit{
     constructor(private router: Router,private route: ActivatedRoute,private service:ReportService ) { }
   ready:boolean=false;
  
      @ViewChild(ReportResultGapComponent) rrGapsComp;
      @ViewChild(ReportResultValidatedSourceComponent) rrValidatedSource;
      @ViewChild(ReportResultValidatedTargetComponent) rrValidatedTarget;
      @ViewChild(ReportResultDiscrepSourceComponent) rrDiscrepanciesSource;
      @ViewChild(ReportResultDiscrepTargetComponent) rrDiscrepanciesTarget;
  
      ngOnInit(){
          this.reportInfo=this.service.getData()
      }
      ngAfterViewInit(){
          this.ready=true
      }
  
  }
  </code></pre>
  
  <p>I tried this approach but the button is being displayed before the grids are completely loaded</p>
  
  <p><a href="https://i.stack.imgur.com/O6S7y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O6S7y.png" alt="enter image description here"></a></p>