angular: ngNonBindable can't handle unescaped { characters
I’m submitting a … (check one with “x”)
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
<div>Test binding: {{2 + 2}}</div>
=> Test binding: 4
<div ngNonBindable>Test non binding: {{2 + 2}}</div>
=> Test binding: {{2 + 2}}
<div>Test non binding: {2 + 2}</div>
=> Template parse errors, the “(Do you have an unescaped “{” in your template? Use “{{ ‘{’ }}”) to escape it.)” message.
This is a problem because precisely due to the fact that they are [ngNonBindable] marked elements, "{{ '{' }}" doesn’t produce the expected result.
Expected behavior
As the escaping of { characters isn’t possible inside [ngNonBindable] elements so it’s the compiler’s job to ignore them altogether, I believe.
<div>Test non binding: {2 + 2}</div>
=> Test binding: {2 + 2}
Reproduction of the problem here => http://plnkr.co/edit/GSzwEUyXyY1qDabjpEL1?p=preview
- Angular version: 2.0.0
About this issue
- Original URL
- State: open
- Created 8 years ago
- Reactions: 28
- Comments: 16 (3 by maintainers)
Any word on if this is on the docket/there’s a different approach to solve this? I’m just trying to show a simple code example in one my template and it’s freaking out.
What is the reason that single braces must be escaped? The project I am working on includes a lot of templates with LaTeX math expressions of this sort:
\frac{2x+3}{x^{-1}+5}
Which is very inconvenient to have to escape. I realize double braces are for binding, but single braces used to be okay in RC4 but since upgrading all of my (hundreds) of templates are broken.
In Angular 13 a simple single { produces NG5002: Invalid ICU message. Missing ‘}’ ngNonBindable still no effect. The trick with {{
foo {}} over multiple lines no longer works either (back ticks in {{ }} but interpreted as code here). So it seems {{‘{’}} for opening curly braces is the only way to go. Or any new on this? 6 years after this this has been reported presenting a block of code or JSON in templates is still awkward. I would understand if double curly braces {{ are difficult to have in a template but single ones?I’m writing webpack loader which can transform code snippets in html files and highlight them https://github.com/anjmao/ng-snippets-loader. I have a problem with javascript code snippets, because of
{and ngNonBindable seems to not work correctly for me too.So still no progress on this in Angular 16? I have:
and I get:
As soon as I do a search for
{and replace with{{ '{' }}it is fixed. Seems pretty reasonable that if you aren’t binding to {{ then you shouldn’t care about a single {.I can totally see hoe this one is confusing as it is not clear what is the intent of
ngNonBindable- should it just “switch off” bindings or ignore all Angular constructs (special chars in template, i18n etc.).Fixing this one properly will require review of all Angular specific constructs in relation to
ngNonBindable. But yes, embedding code snippets / JSON in templates is a valid use-case that we should consider.Im facing this problem using MathJax
Anything new on this? I am writing a KaTeX Component and it would be nice to be able to pass arbitrary TeX strings through <ng-content></ng-content> to the Component.
For everyone interpreting the angular error message too literally (like me), it doesn’t have to be escaped like this:
\frac{{'{'}}d{{'}'}}{{'{'}}dx{{'}'}}\sqrt{{'{'}}x{{'}'}}You can also escape it like that:
{{' \\frac{d}{dx}\\sqrt{x}= '}}Still not perfect, but managable.