How do you display a literal {{ in Angular 2

Question

I have a template in Angular2 rc 1 where I need to display a chunk of code from a different language. That language has {{ in it.

import {Component, Input} from '@angular/core';

@Component({
    selector: 'blue-box',
    template: `
        <div class="blue-box">
            <div class="blue-box-title">{{boxTitle}}</div>
            {{define "bob"}}This is the template bob{{end}}
            <span>
                <ng-content></ng-content>
            </span>
        </div>
    `,
    styleUrls: ['../css/blue-box.css'],
})
export class BlueBox {

    @Input() boxTitle: string;

    constructor() {
    }

}

How do I get the template processor to treat {{ as a literal string instead of the start of a template expression? The problem occures at the {{define "bob"}} where I need a literal {{.

The error on the browser (chrome) console is:

EXCEPTION: Template parse errors:
Parser Error: Unexpected token 'bob' at column 8 in [
        {{define "bob"}}This is the template bob{{end}}
        ] in BlueBox@2:49 ("
    <div class="blue-box">
        <div class="blue-box-title">{{boxTitle}}</div>[ERROR ->]
        {{define "bob"}}This is the template bob{{end}}
        <span>
            <ng-content></ng-content>
 "): BlueBox@2:49

Answer 1

use ngNonBindable

example:

<div ngNonBindable> {{ I'm inside curly bracket }} </div>

UPDATE

The above is valid in Anuglar 2, now in Angular 4 there is a class called DomSanitizer that can be used for inserting any kind of code inside of your HTML as a text.

You can check this working plunker from micronyks's answer