How do you display a literal {{ in Angular 2 -

i have template in angular2 rc 1 need display chunk of code different language. language has {{ in it.

import {component, input} '@angular/core';  @component({     selector: 'blue-box',     template: `         <div class="blue-box">             <div class="blue-box-title">{{boxtitle}}</div>             {{define "bob"}}this template bob{{end}}             <span>                 <ng-content></ng-content>             </span>         </div>     `,     styleurls: ['../css/blue-box.css'], }) export class bluebox {      @input() boxtitle: string;      constructor() {     }  } 

how template processor treat {{ literal string instead of start of template expression? problem occures @ {{define "bob"}} need literal {{.

the error on browser (chrome) console is:

exception: template parse errors: parser error: unexpected token 'bob' @ column 8 in [         {{define "bob"}}this template bob{{end}}         ] in bluebox@2:49 ("     <div class="blue-box">         <div class="blue-box-title">{{boxtitle}}</div>[error ->]         {{define "bob"}}this template bob{{end}}         <span>             <ng-content></ng-content>  "): bluebox@2:49 

use ngnonbindable

example:

<div ngnonbindable> {{ i'm inside curly bracket }} </div> 

update

the above valid in anuglar 2, in angular 4 there class called domsanitizer can used inserting kind of code inside of html text.

you can check working plunker micronyks's answer