Home / Questions / 3883
Accepted
Angel Angel
Asked: 2020-02-09 13:32:17 +0800 CST 2020-02-09 13:32:17 +0800 CST

AngularJS-2 change delimiters {{ }}

  • 772

I'm trying to use something similar to interpolateProviderin AngularJS 2but I can't find something similar to this:

AngularJS 1.x $interpolateProvider 

$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');

Looking at the documentation for AngularJS 2I couldn't find anything like the above.

angular2-template

2 Answers

  1. From what I've seen it doesn't look like it's configurable (for now).

    The only thing I have come to, looking at the code, is that they have defined an internal variable with the regular expression that would correspond to the interpolation expression, forgive the redundancy.

    The code is this:

    L51: modules/angular2/src/core/change_detection/parser/parser.ts 

    // TODO(tbosch): Cannot make this const/final right now because of the transpiler...
var INTERPOLATION_REGEXP = /\{\{([\s\S]*?)\}\}/g;

    L21: modules/angular2/src/compiler/legacy_template.ts

    var INTERPOLATION_REGEXP = /\{\{.*?\}\}/g;

    I don't know if changing the value of these variables could achieve what you are looking for (of course you would have to re-compile later angular2).

    I also don't know if as it evolves they will make it configurable. If you are very interested, register an "issue" inquiring about the functionality (advantages of OSS projects) , then whether they pay attention to it or not is something else.

    I am personally concerned about the changes in the syntax to bind events, ... although it seems that there are utilities to be able to migrate it or it will also be possible to mix ng1 and ng2. We will have to be vigilant.

    Update 02/10/2016: In the link shared by @AngelAngel in the comments you can see how there is already an open Issue on this subject " Ability to change the interpolation delimiter character #3682 "

    • 5
  2. Best Answer

    can be changed by including the interpolation property in @component, example:

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

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    interpolation: ['[[', ']]']
})

export class AppComponent 
{
    title: string = "Angular 2 App";
    paragraph: string = "Nueva app con paso de variables";
}

    with this we change the {{ }} by [[ ]]

    • 3