title: How do you display a literal {{ in Angular 2
body: <p>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.</p>
  
  <pre><code>import {Component, Input} from '@angular/core';
  
  @Component({
      selector: 'blue-box',
      template: `
          &lt;div class="blue-box"&gt;
              &lt;div class="blue-box-title"&gt;{{boxTitle}}&lt;/div&gt;
              {{define "bob"}}This is the template bob{{end}}
              &lt;span&gt;
                  &lt;ng-content&gt;&lt;/ng-content&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      `,
      styleUrls: ['../css/blue-box.css'],
  })
  export class BlueBox {
  
      @Input() boxTitle: string;
  
      constructor() {
      }
  
  }
  </code></pre>
  
  <p>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 {{.</p>
  
  <p>The error on the browser (chrome) console is:</p>
  
  <pre><code>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 ("
      &lt;div class="blue-box"&gt;
          &lt;div class="blue-box-title"&gt;{{boxTitle}}&lt;/div&gt;[ERROR -&gt;]
          {{define "bob"}}This is the template bob{{end}}
          &lt;span&gt;
              &lt;ng-content&gt;&lt;/ng-content&gt;
   "): BlueBox@2:49
  </code></pre>