CODEWITHSUNDEEP
javascriptangularexpressioncurly-braces
Anonym
Anonym

Reputation: 241

nonBindable single curly bracket in html of an element :angular 2/4

I need to show single curly bracket in my application. Something like this: ...demo text .... {name} ...some more text ...
While compiling angular reaches EOF. Is there a way i can escape this single curly bracket?

Other than that i need to evaluated nested expressions in Angular 2. Something like {{var1 {{var2 {{var3}} var4}} var5}} Unable to find any workaround for that. Any other way i can implement that?

Upvotes: 2

Views: 3587

Answers (4)

Julio Cesar Brito Gomes
Julio Cesar Brito Gomes

Reputation: 810

You can do like this

<div>{{'{'}} "object": [] {{'}'}}</div> // output: { "object": [] }

OR

Create variables on the component side with the strings you need to use, then in the template use them with binding.

component.ts

imports ...
export class ... {
    leftCB = '{';
    rightCB = '}';
}

component.html

<div>{{leftCB}} "object": [] {{rightCB}}</div> // output: { "object": [] }

CYA!

Upvotes: 1

Toolkit
Toolkit

Reputation: 11119

you need to do 

...demo text .... {{ '{' }}name{{ '}' }} ...some more text ...

because it is ngnonbindable. it will work fine on plane html but not in angular.

Upvotes: 1

A.T.
A.T.

Reputation: 26312

To print curly braces use ng-non-bindable , still available in angular2

<div ngNonBindable>
...demo text .... {name} ...some more text ...
</div>

for {{var1 {{var2 {{var3}} var4}} var5}} nested, I think this be better if you evaluate in controller.js

Edit

I think aforementioned solution is not appropriate as ngNonBindable directive is dicey.

template: `<div> {{ '{' }} I'm inside curly bracket } </div>`

simply escape the first curly brace, this should work.

Upvotes: 3

Thor Jacobsen
Thor Jacobsen

Reputation: 8851

My advice: if you need to do string operations or deep object lookups, do that in the component code, not in the template.

re nested evaluation: AFAIK that's not possible

Upvotes: 0

Related Questions