How to load tikz script code (Latex code) on button click using Angular? ( Not in ngOnInit() )

Question

I'm trying show Latex code output on web browser using angular with the help of TikZ library. I'm able to achieve this when I'm calling the loadScript() method in ngOnInit() (Without using setTimeOut) but not able to achieve this on button click. Note: This code is not working if we call loadScript() method in ngOnInit() with setTimeout method.

Below is the loadScript() method:

loadScript() {
    let body = document.getElementById("latex");
    let script = document.createElement("script");
    script.innerHTML = this.content;
    script.src = "./assets/tikz/tikz.js";
    script.async = true;
    script.defer = true;
    script.type = "text/tikz";
    body!.appendChild(script);
  }

html file:

<div id="latex"></div>
<div>
  <button (click)="loadScript()">Run</button>
</div>