Templates disallow unescaped braces even after changing interpolation delimiters

[lazarljubenovic]

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

When interpolation delimiters are changed to [[ and ]], having an unescaped { in template still throws an error (including {{).

Expected behavior

{ should be allowed in templates if interpolation delimiters are changed.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/5Kl9w2Mpct9z7ljEgogS?p=preview

What is the motivation / use case for changing the behavior?

One would normally change interpolation string because one needs {{ for something else (eg. LaTeX syntax uses { heavily).

Please tell us about your environment:

• Angular version: 2.4.x

• Browser: all

• Language: TypeScript

[lazarljubenovic]

Upon further investigation, I realize that escaping { was introduced because of ICU messages. This was in 2.0.0-rc5 and interpolation was enabled in 2.0.0-rc3.

"{" is used a a delimiter for ICU messages then it could not be used in text nodes. "{" should be escaped as "{{ '{' }}"

Before:

<span>some { valid } text</span>

After:

<span>some { invalid } text<span> <!-- throw parse error -->
<span>some {{ '{' }} valid } text</span>

The original reason for allowing making interpolation strings configurable was to be able to type {{ without problems, but that's gone now too. It was mentioned that stuff might break with i18n in #8865, but looks like it was for other reasons (hardcoded braces).

[vicb]

We should update the error message to display the active delimiters instead of having {{ hardcoded

[trotyl]

Duplicate of #11859

[Zefling]

Other strange case with braces. I want to escape double braces for show an example,

{{ -50 | math:'min':50 }} show -50 and not {{ -50 | math:'min':50 }}

Currently, my solution, add a zero-width joiner (‍):

{‍{ -50 | math:'min':50 }}

[lazarljubenovic]

I've long given up trying to fit a { in a template. I just bind the string from the class now. 😄

[petebacondarwin]

Yes @trotyl is right here - duplicate of #11859

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}