angularmathjaxkatexangular18

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: angular website page

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

renderMathInElement(document.body)

enter image description here

angular website page working

Here is the html code:

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

What else I tried:

Additional Details:

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.