I am facing an issue where I need to update the data retrieved from Firebase in a way that equations are displayed on the page instead of random symbols representing Latex syntax. While I have successfully integrated MathJax into my project through a script tag and can display math notation correctly in one paragraph, I am struggling to utilize it across other components in the project. Is there a more efficient method to install the necessary dependencies via npm, and how can I ensure that my Firebase data, which is already being pulled correctly onto the page, updates using MathJax for proper formatting?
The head tag in my index.html file looks like this:
<head>
<meta charset="utf-8">
<title>Testing</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}})
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>My component.html is structured as follows:
<div class="topnav">
<input type="text" placeholder="Search..">
<div class="theoremsContainer">
<ul>
<div *ngFor="let theorem of bibleObservable | async">
<ngb-alert type="info" [dismissible]="false">
<h1>{{theorem.rule}}: {{theorem.name}}</h1>
<p>{{theorem.eq}}</p>
</ngb-alert>
</div>
</ul>
</div>
</div>Here is my component.ts file:
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-bible',
templateUrl: './bible.component.html',
styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit {
bibleObservable: Observable<any[]>;
constructor(private db: AngularFireDatabase) { }
ngOnInit() {
this.bibleObservable = this.getRule('/theorems');
}
getRule(listPath): Observable<any[]> {
return this.db.list(listPath).valueChanges();
}
}