How to write mathematic equation in ionic 5

Ionic Native
1

Hello !
I read https://github.com/garciparedes/ng-katex#readme

I have tried writing math exercises with simple equations in an app that I want to develop with ionic 5 and Angular.
But I can’t.
I cannot insert math equations in the tag like “ion-card”
Can anyone help me?
I installed ng-katex from the command line of Visual Studio Code.
I have three files:

1- home.module.ts
In this file I added this:
import {KatexModule} from ‘ng-katex’;
Then this:
@NgModule ({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
KatexModule
],
statements: [HomePage]
})

2- In the file: home.page.ts
For example, I did this:
import {Component} from ’@angular / core’;

@Component ({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
template: <ng-katex-paragraph [paragraph] = “paragraph”>
})
export class HomePage {
paragraph: string = \ x ^ 2 + y ^ 2 5 \ ;
constructor () {
}
}

3- In the file: home.page.html

it is in this file that I want to insert the simple equations in the ion-card tags
But I can’t. I don’t want to do js functions to solve the equations but it’s just display them.

Can anyone really help me? from the three files: home.module.ts; home.page.ts; home.page.ts

I watched on (http://youtube.com/), there isn’t a video that explains this.

2

Something seems to have gotten lost in translation here, because this won’t even compile for me.

However, if I substitute the following:

paragraph = "$money = \\sqrt{all+evil}$";

…then I see:

3

Thank you very much for wanting to help me. I want to write simple math expressions in ion-card tags; ion-card-content tags .
I did what you told me, with my ionic 5 I get these screens (see pictures)
Thank you .

Capture1-2
Capture1-2439×620 36 KB
Capture 3
Capture 4
Capture 4403×814 19.4 KB

4

Did you read this part? You need to add the katex-specific CSS import to your global.scss.

5

You are right. thank you.
I had the same result as you importing this: @import “~ katex / dist / katex.css”;
in the global.scss file

6

I get this screen (see picture)

Capture 5
Capture 5397×810 18.3 KB

7

Thank you very much for your help .
Thanks to: https://github.com/garciparedes/ng-katex#readme,
I was able to write beautiful math equations with ng-katex plugin in my mobile app project with ionic 5 and Angular.
I looked at this web page: https://www.codecogs.com/latex/eqneditor.php, I managed to change the color of the equations and also change their size. But when I run (ionic serve) everything in my file: home.page.html gets erased and doesn’t show up, whereas I just want to put the math equations in specific places in the home file. page.html. Precisely in the tags or in .
Help me please ! because my field is mathematics.
Thank you.

8

In your project directory, there is a subdirectory “src” and another “www”. Only edit things under “src”. Leave everything under “www” alone. It doesn’t belong to you.

9

But when I run (ionic serve) everything in my file: home.page.html gets erased and doesn’t show up, whereas I just want to put the math equations in specific places in the home file. page.html. Precisely in the ion-content padding tags or in ion-card.
Help me please ! because my field is mathematics.
Thank you.

10

OK, thanks.
I have the “src” directory but I don’t have the “www” directory. I will do everything to make it appear because I have already seen it in my other small projects. Maybe there is a plugin that I haven’t installed.
Thank you .

11

Hello !
I am still coming back to you because I have not yet found the solution to my problem.

The “www” directory appears as soon as you add a platform like IOS, android, browser. I did this and the “www” directory appeared.

But my problem is not solved.

I have three files which are: home.page.ts, home.page.html and home.module.ts.

In the home.module.ts file, I put:

import {KatexModule} from ‘ng-katex’;

and in
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
KatexModule
],

In the file: home.page.ts, I put:

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

then also:
export class HomePage {

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

constructor () {}

}

When I do: ionic serve, everything is displayed fine.

My question is: can’t we directly use the ng-katex tags in the file: home.page.html? to place the mathematical equations where you want. For example :

< ion-content padding >
< p >
< ng-katex [equation] = “equation” > < /ng-katex >
< /p >

Eq1 : < ng-katex [équation] = "équation1" > < /ng-katex > Eq2: < ng-katex [equation] = "equation2" > < /ng-katex > Eq3: < ng-katex [equation] = "equation3" > < /ng-katex >

< /ion-content >

and in the home.page.ts file

export class AppComponent {
equation1: string = ‘\ \sum_ {i = 1} ^ nx_i’;
equation2: string = ‘x = \ \frac {-b \ \pm \ \sqrt {b ^ 2-4ac}} {2a}’;
equation3: string = ‘\ \Gamma (z) = \ \int_0 ^ \ \infty t ^ {z-1} e ^ {- t} dt \ ,.’;

12

Should we put the whole page that contains the mathematical equations in:
template: <ng-katex-html [html] =" html "> </ng-katex-html>

and
html: string = `here all the pages which contain mathematical equations with the ionic and html tags’?

13

I would think so. I no longer have the scratch project I was using to talk to you before, so I can’t check easily.

I certainly would not do that. I never put any HTML in controller properties; only in templates. Primarily this is for separation-of-concerns reasons, although it avoids a class of security bugs involving sanitization as well.

14

Thank you very much for your time to answer me. Thanks to your help, I am able to display the beautiful mathematical expressions. All I’m still looking for is how to write these math expressions in different lines and different paragraphs that are in the html page.

Excuse me. I saw this:

click on the 3 files on the left: App.component.html;
App.component.ts
and App.module.ts

But I couldn’t have had the same result. From my side, there is nothing that is displayed.

And yet this is the solution to my problem.
It should work if I copy / paste on the same files or on the files: Home.page.html; home.page.ts and home.module.ts.
Did I make a mistake on my side?

15

See this fork. You need to make sure all backslashes are escaped.