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?

8 thoughts on “nonBindable single curly bracket in html of an element :angular 2/4”

  1. 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.

    Reply
  2. 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!

    Reply
  3. 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

    Reply
  4. 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.

    Reply

Leave a Comment