Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: "@angular/compiler-cli": "~18.0.0",
- Cross-platform modules:
- Android Runtime: "@nativescript/android": "8.8.1-next.2024-07-19-10014251437",
- iOS Runtime:
- Plugin(s): "katex": "^0.16.11",, "@types/katex": "^0.16.7",
- NativeScript-Angular: "@nativescript/angular": "^18.0.0",
- Angular: "@angular/core": "~18.0.0",
Describe the bug
I created unsafe html string using
this._safeHtml = this.domSanitizer.bypassSecurityTrustHtml(htmlString);
Attempting to render this content using Html View using property binding like so
<HtmlView [html]="_safeHtml"></HtmlView>
results to the following error
An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
TypeError: value.search is not a function
StackTrace:
[html:setNative]...
NB:
- Using the approach below:
<HtmlView html="{{_safeHtml}}"></HtmlView>
does not render the string(latex string) as expected and also throws a safevalue must use [property]=binding error on the screen.
- The string renders as expected in pure angular project using the following code:
<div [innerHTML]="_safeHtml"></div>
A sample string to be rendered looks like so
<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>s</mi><mi>u</mi><msubsup><mi>m</mi><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></msubsup><mo stretchy="false">(</mo><msubsup><mi>x</mi><mi>i</mi><mn>2</mn></msubsup><mo>−</mo><mi>o</mi><mi>v</mi><mi>e</mi><mi>r</mi><mi>l</mi><mi>i</mi><mi>n</mi><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">sum_{i=1}^n(x_i^2 - overline{x}^2)</annotation></semantics></math></span>
What could be a recommended way to solve this situation or a walkaround?
To Reproduce
Expected behavior
Sample project
Additional context