How do you show the literal {{in Angular 2

Question

I have a template in Angular2 rc 1 where I need to display a piece of code from another language. This 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 to make a template handler process {{as a literal string instead of the start of a template expression? The problem occurs in {{define "bob"}}, where I need the literal {{.

Error in browser console (chrome):

 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 action works in Anuglar 2, now in Angular 4 there is a class called DomSanitizer , which can be used to insert any code inside your HTML as text.

You can check this working plunker from micronyks answer

Answer 2

ngNonBindable is not always an option, you need to use an additional DOM element, and there is a better way

After RC1

In the next version, a way to configure interpolation regexp https://github.com/angular/angular/pull/7417#issuecomment-221761034 will appear. It is already merged and will be available in the next version.

RC1

You can do it now. Go to main.ts (or another file where you do the download) and add this

 // some of your imports here import { Provider } from '@angular/core'; import { Parser, SplitInterpolation } from '@angular/compiler/src/expression_parser/parser'; import { Lexer } from '@angular/compiler/src/expression_parser/lexer'; import { StringWrapper } from '@angular/platform-browser/src/facade/lang'; import { BaseException } from '@angular/platform-browser/src/facade/exceptions'; class Parser2 extends Parser { myInterpolationRegexp = /\[\[([\s\S]*?)\]\]/g; // <- CUSTOMIZATION constructor(public _lexer: Lexer) { super(_lexer) } splitInterpolation(input, location):SplitInterpolation { var parts = StringWrapper.split(input, this.myInterpolationRegexp); if (parts.length <= 1) { return null; } var strings = []; var expressions = []; for (var i = 0; i < parts.length; i++) { var part: string = parts[i]; if (i % 2 === 0) { // fixed string strings.push(part); } else if (part.trim().length > 0) { expressions.push(part); } else { var exs = `Parser Error: Blank expressions are not allowed in interpolated strings at column ${this._findInterpolationErrorColumn2(parts, i)} in [${input}] in ${location}`; throw new BaseException(exs); } } return new SplitInterpolation(strings, expressions); } private _findInterpolationErrorColumn2(parts: string[], partInErrIdx: number): number { var errLocation = ''; for (var j = 0; j < partInErrIdx; j++) { errLocation += j % 2 === 0 ? parts[j] : `{{${parts[j]}}}`; } return errLocation.length; } } bootstrap(AppComponent, [ // add your custom providers array with out parser provider new Provider(Parser, { useClass: Parser2 }) ]); 

Now you can write your templates like this

 <div>[[ title ]]</div> {{begin}} asdas {{#end}} <div> <div *ngFor="let item of list | isodd"> [[ item.name ]] </div> </div> 

Please note that now you do not need to wrap your code in NgNonBindable

UPD:

One of the reasons why ngNonBindable is a poor choice.

This example will be broken down in possible ways.

 <div>{{ title }}</div> <div ngNonBindable> {{begin}} <button (click)="add()">add</button> <!--- Will Explode!!! ---> <div> <div *ngFor="let item of list | isodd"> {{ item.name }} </div> </div> {{#end}} </div> 

If you use InterpolationRegexp, everything will work fine (and this is one less div)

 <div>[[ title ]]</div> {{begin}} <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isodd"> [[ item.name ]] </div> </div> {{#end}}