Angular 4 - how to run a directive method only after its parent has fully rendered

Question

I use Angular 4. I have a directive which is a button, inserted into the parent's template like this:

<button (emitPdfUrl)="getInvoicePdfUrl($event);" pdfButton [pdfEl]="pdf">
    <fa name="file-pdf-o"></fa> Download PDF
</button>

How can I run the method getPdf() from the directive when the parent has fully rendered? I need this because this function will then get the innerHtml from some other parts of her parent's template. What happens right now is, the directive's function (getPdf()) gets the half displayed template, ie. the template without the loaded variables of the parent, and thus, the innerHTML is not complete with loaded data inside, so the function takes the "empty" template. Thanks for any advice guys! :)

Answer 1

It is parent component's responsibility to provide a method that will be able to follow the desired execution order.

This can be achieved with a pair of RxJS subjects:

private componentInitSubject = new AsyncSubject().ignoreElements();
public pdfUrlSubject = new ReplaySubject(1);

constructor() {
  this.pdfUrlSubscription = this.componentInitSubject
  .concat(this.pdfUrlSubject)
  .subscribe(url => this.getInvoicePdfUrl(url));
});

ngOnAfterViewInit() {
  this.componentInitSubject.complete();
}

getInvoicePdfUrl(url) {
  // starts to receive urls only after completion of componentInitSubject
}

And values can be emitted to the subject instead of calling getInvoicePdfUrl directly:

<button (emitPdfUrl)="pdfUrlSubject.emit($event)" pdfButton [pdfEl]="pdf">

pdfUrlSubscription should be unsubscribed on component destroy.