Katex: How to use katex on angular2 projects?

Created on 30 Apr 2017 · 7Comments · Source: KaTeX/KaTeX

Can somebosy please help me by telling how to use katex in angular 2 app?

Source

nitishkumarnitc

Most helpful comment

Based on this question, I started the development of an open source project to typeset TeX math expressions with Angular. The project is on https://github.com/garciparedes/ng-katex.

You can install the module with:

npm install ng-katex --save

To add the module to your proyect add the KatexModule to import's field of your parent module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { KatexModule } from 'ng-katex';

@NgModule({
  imports: [BrowserModule, KatexModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then you can use it as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex [equation]="equation">`
})
export class AppComponent {
  equation: string = ''\sum_{i=1}^nx_i'';
}

garciparedes on 11 Nov 2017

👍2 ❤1

All 7 comments

I don't have any angular2 experience, but I found http://stackoverflow.com/questions/36370826/how-to-get-mathjax-working-with-angular2 which might help. Instead of calling

MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement]);

in ngOnChanges you'd call

katex.render("c = \\pm\\sqrt{a^2 + b^2}", this.el.nativeElement);

kevinbarabash on 30 Apr 2017

Based on this question, I started the development of an open source project to typeset TeX math expressions with Angular. The project is on https://github.com/garciparedes/ng-katex.

You can install the module with:

npm install ng-katex --save

To add the module to your proyect add the KatexModule to import's field of your parent module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { KatexModule } from 'ng-katex';

@NgModule({
  imports: [BrowserModule, KatexModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then you can use it as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-katex [equation]="equation">`
})
export class AppComponent {
  equation: string = ''\sum_{i=1}^nx_i'';
}

garciparedes on 11 Nov 2017

👍2 ❤1

@garciparedes. Thanks a lot.

nitishkumarnitc on 11 Nov 2017

This sounds great! We should consider linking to this project from KaTeX.