<p dir="auto">When we include json content as part of template html, we are getting template parsing errors like below. we use json content heavily in our current Angular v1 application to inject locale content to be used in directive html text labels.</p>
<p dir="auto"><em>Template parse errors:<br>
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("<br>
}</em></p>
<p dir="auto">Ex: page template html (use custom directive transcluded with json content)<br>
`</p><div dir="auto"><br>
{ "lblFName": "xyz" }<p dir="auto"></p>
</div>`
<p dir="auto">custom directive template html (we internally get the transcluded json content to vm.content variable and use it in the directive template)<br>
<code class="notranslate">&lt;span&gt;{{::vm.content.lblFName}}&lt;/span&gt;</code></p>
<p dir="auto">we are trying to research on upgrading our application to Angular2 with RC5 version but getting template parsing errors when trying to include json content like above. Do we have any other options to support this feature in Angular2 or allow us to override or add support to Angular2 template parser to ignore json content like above ...</p>
<p dir="auto">Error message specifies, that we need to escape { char with '{', having to escape complex json content structure would be time consuming and we are looking for any other options are available in Angular2 for this...</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
<code class="notranslate">&lt;div&gt;Test binding: {{2 + 2}}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: 4</code><br>
<code class="notranslate">&lt;div ngNonBindable&gt;Test non binding: {{2 + 2}}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: {{2 + 2}}</code><br>
<code class="notranslate">&lt;div&gt;Test  non binding: {2 + 2}&lt;/div&gt;</code><br>
=&gt; Template parse errors, the "(Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)" message.</p>
<p dir="auto">This is a problem because precisely due to the fact that they are [ngNonBindable] marked elements, <code class="notranslate">"{{ '{' }}"</code> doesn't produce the expected result.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
As the escaping of <code class="notranslate">{</code> characters isn't possible inside [ngNonBindable] elements so it's the compiler's job to ignore them altogether, I believe.</p>
<p dir="auto"><code class="notranslate">&lt;div&gt;Test  non binding: {2 + 2}&lt;/div&gt;</code><br>
=&gt; <code class="notranslate">Test binding: {2 + 2}</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
here =&gt; <a href="http://plnkr.co/edit/GSzwEUyXyY1qDabjpEL1?p=preview" rel="nofollow">http://plnkr.co/edit/GSzwEUyXyY1qDabjpEL1?p=preview</a></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
</ul>