# Using MathML in Ionic 2

Hi Community.

I am trying to use MathML into my Ionic Component but its failing. I am getting this error

Unhandled Promise rejection: Template parse errors:
':math:mi' is not a known element:
1. If ':math:mi' is an Angular component, then verify that it is part of this module.
2. If ':math:mi' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (


but when put the same code on a regular html page its working fine

Hmmm, this is probably because angular think mathML is from a custom angular component, not mathML library.
Looking around gives me the error message that you’re getting. Hmm, you might need to resort to using the raw MathJax library instead.

can you tell me some hints or step or any references , please

Hi @Mrunal95 I ended up using katex by khan academy and this library ng-katex

but it works for android and ios?
can you provide me steps or refrence

Yes so far its working for android

npm install ng-katex --save


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

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

@NgModule({
imports: [
BrowserModule,
KatexModule
],

declarations: [AppComponent],
bootstrap: [AppComponent]
})

class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);


#### Important!

If you’re using angular-cli , add the katex css import to your styles.css :

@import '~katex/dist/katex.css';

If you’re not using the angular-cli , import the stylesheet to your index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">

## Usage

You can write a LaTeX equation as follows:

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

@Component({

selector: 'my-app',

template: <ng-katex [equation]="equation"></ng-katex>

})

export class AppComponent {

equation: string = '\\sum_{i=1}^nx_i';

}


Also, you can add options to ng-katex components with:

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

import { KatexOptions } from 'ng-katex';

@Component({
selector: 'my-app',
template: <ng-katex [equation]="equation" [options]="options"></ng-katex>
})

export class AppComponent {
equation: string = '\\sum_{i=1}^nx_i';
options: KatexOptions = {
displayMode: true,
};
}


The options object structure is defined here.

If you want to write a paragraph with LaTeX equations, you can do it as follows:

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: <ng-katex-paragraph [paragraph]="paragraph"></ng-katex-paragraph>
})

export class AppComponent {

paragraph: string = 
You can write text, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know.
You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$.
In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$.
To scape the \\$symbol it's mandatory to write as follows: \\\\$;
}


If you want to write HTML with LaTeX equations, you can do it as follows: (Security Note: this bypasses Angular DOM Sanitization)

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

@Component({
selector: 'my-app',
template: <ng-katex-html [html]="html"></ng-katex-html>
})

export class AppComponent {
html: string = 
<div>You can write html, that contains expressions like this: $x ^ 2 + 5$ inside them. As you probably know. You also can write expressions in display mode as follows: $$\\sum_{i=1}^n(x_i^2 - \\overline{x}^2)$$. In first case you will need to use \\$expression\\$ and in the second one \\$\\$expression\\$\\$. To scape the \\$symbol it's mandatory to write as follows: \\\\$</div><p>: <button>I'm a button</button></p>
;
}