Katex is not working in Angular 18 but works in console

I have imported katex with script tag in index.html of my angular 18 project like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

There are no errors in the console, but it is not showing the updated version:

Though after I run this command in the developer console it works:

renderMathInElement(document.body)

Here is the html code:

<p>\(x^2 + y^2 = z^2\)</p>

What else I tried:

Using katex from npm:

import renderMathInElement from 'katex/contrib/auto-render'
// ...
ngAfterViewInit(){
   this.start()

} 

start(){
   renderMathInElement(document.body)
}

SCSS:

@import "../node_modules/katex/dist/katex.min.css";

With no errors this didn't work either

Using MathJax: I used the script tag to load mathjax and used window.MathJax.typsetPromise()
```
ngAfterViewInit(){
   this.start()

} 

start(){
   window.MathJax.typsetPromise()
}
```

Additional Details:

I have tried using different lifecycle hooks (constructor, ngOnInit, and even triggering on a button click).
The console.log (Not shown above) in the start function prints but it does not change the appearance work.

Any advice on what might be causing this issue or how to resolve it?

Thanks in Advance!

Solution

I couldn't find a way to I just wrote a component for this with katex.

// katex.component.ts
export class KatexComponent implements AfterViewInit{
  @Input({required: true}) tex?: string
  @ViewChild('ptex') texElement?: ElementRef
  
  ngAfterViewInit(){
    katex.render(this.tex || "", this.texElement?.nativeElement)
  }
}

// katex-label.component.ts
export class KatexLabelComponent {
  parts: {math: boolean, value: string}[] = [] 
  @Input({ required: true }) tex: string = "";

  ngOnInit() {
    const splitContent = this.tex.split(/(\$\$.*?\$\$)/);

    this.parts = splitContent.map(part => {
      if (part.startsWith('$$')) {
        return { math: true, value: part.slice(2, -2) };
      } else {
        return { math: false, value: part };
      }
    }); 
  }

Also, sorry for posting this late. I completely forgot about this question.