feat(compiler): make interpolation symbols configurable (@Component config) (#9367)

closes #9158

modules/@angular/core/src/metadata.ts

@@ -42,7 +42,8 @@ export interface ComponentDecorator extends TypeDecorator {
     renderer?: string,
     styles?: string[],
     styleUrls?: string[],
-    animations?: AnimationEntryMetadata[]
+    animations?: AnimationEntryMetadata[],
+    interpolation?: [string, string]
   }): ViewDecorator;
 }
 
@@ -63,7 +64,8 @@ export interface ViewDecorator extends TypeDecorator {
     renderer?: string,
     styles?: string[],
     styleUrls?: string[],
-    animations?: AnimationEntryMetadata[]
+    animations?: AnimationEntryMetadata[],
+    interpolation?: [string, string]
   }): ViewDecorator;
 }
 
@@ -175,7 +177,8 @@ export interface ComponentMetadataFactory {
     animations?: AnimationEntryMetadata[],
     directives?: Array<Type|any[]>,
     pipes?: Array<Type|any[]>,
-    encapsulation?: ViewEncapsulation
+    encapsulation?: ViewEncapsulation,
+    interpolation?: [string, string]
   }): ComponentDecorator;
   new (obj: {
     selector?: string,
@@ -197,7 +200,8 @@ export interface ComponentMetadataFactory {
     animations?: AnimationEntryMetadata[],
     directives?: Array<Type|any[]>,
     pipes?: Array<Type|any[]>,
-    encapsulation?: ViewEncapsulation
+    encapsulation?: ViewEncapsulation,
+    interpolation?: [string, string]
   }): ComponentMetadata;
 }
 
@@ -252,7 +256,8 @@ export interface ViewMetadataFactory {
     encapsulation?: ViewEncapsulation,
     styles?: string[],
     styleUrls?: string[],
-    animations?: AnimationEntryMetadata[]
+    animations?: AnimationEntryMetadata[],
+    interpolation?: [string, string]
   }): ViewDecorator;
   new (obj: {
     templateUrl?: string,
@@ -262,7 +267,8 @@ export interface ViewMetadataFactory {
     encapsulation?: ViewEncapsulation,
     styles?: string[],
     styleUrls?: string[],
-    animations?: AnimationEntryMetadata[]
+    animations?: AnimationEntryMetadata[],
+    interpolation?: [string, string]
   }): ViewMetadata;
 }
 

modules/@angular/core/src/metadata/directives.ts

@@ -954,6 +954,8 @@ export class ComponentMetadata extends DirectiveMetadata {
 
   encapsulation: ViewEncapsulation;
 
+  interpolation: [string, string];
+
   constructor({selector,
                inputs,
                outputs,
@@ -973,7 +975,8 @@ export class ComponentMetadata extends DirectiveMetadata {
                animations,
                directives,
                pipes,
-               encapsulation}: {
+               encapsulation,
+               interpolation}: {
     selector?: string,
     inputs?: string[],
     outputs?: string[],
@@ -993,7 +996,8 @@ export class ComponentMetadata extends DirectiveMetadata {
     animations?: AnimationEntryMetadata[],
     directives?: Array<Type|any[]>,
     pipes?: Array<Type|any[]>,
-    encapsulation?: ViewEncapsulation
+    encapsulation?: ViewEncapsulation,
+    interpolation?: [string, string]
   } = {}) {
     super({
       selector: selector,
@@ -1018,6 +1022,7 @@ export class ComponentMetadata extends DirectiveMetadata {
     this.encapsulation = encapsulation;
     this.moduleId = moduleId;
     this.animations = animations;
+    this.interpolation = interpolation;
   }
 }
 

modules/@angular/core/src/metadata/view.ts

@@ -128,8 +128,11 @@ export class ViewMetadata {
 
   animations: AnimationEntryMetadata[];
 
+  interpolation: [string, string];
+
   constructor(
-      {templateUrl, template, directives, pipes, encapsulation, styles, styleUrls, animations}: {
+      {templateUrl, template, directives, pipes, encapsulation, styles, styleUrls, animations,
+       interpolation}: {
         templateUrl?: string,
         template?: string,
         directives?: Array<Type|any[]>,
@@ -137,7 +140,8 @@ export class ViewMetadata {
         encapsulation?: ViewEncapsulation,
         styles?: string[],
         styleUrls?: string[],
-        animations?: AnimationEntryMetadata[]
+        animations?: AnimationEntryMetadata[],
+        interpolation?: [string, string]
       } = {}) {
     this.templateUrl = templateUrl;
     this.template = template;
@@ -147,5 +151,6 @@ export class ViewMetadata {
     this.pipes = pipes;
     this.encapsulation = encapsulation;
     this.animations = animations;
+    this.interpolation = interpolation;
   }
 }

modules/@angular/core/test/linker/integration_spec.ts

@@ -1300,6 +1300,31 @@ function declareTests({useJit}: {useJit: boolean}) {
                      async.done();
                    });
              }));
+
+      it('should support custom interpolation',
+         inject(
+             [TestComponentBuilder, AsyncTestCompleter],
+             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+               tcb.overrideView(
+                      MyComp, new ViewMetadata({
+                        template: `<div>{{ctxProp}}</div>
+<cmp-with-custom-interpolation-a></cmp-with-custom-interpolation-a>
+<cmp-with-custom-interpolation-b></cmp-with-custom-interpolation-b>`,
+                        directives: [
+                          ComponentWithCustomInterpolationA, ComponentWithCustomInterpolationB
+                        ]
+                      }))
+                   .createAsync(MyComp)
+                   .then((fixture) => {
+                     fixture.debugElement.componentInstance.ctxProp = 'Default Interpolation';
+
+                     fixture.detectChanges();
+                     expect(fixture.debugElement.nativeElement)
+                         .toHaveText(
+                             'Default Interpolation\nCustom Interpolation A\nCustom Interpolation B (Default Interpolation)');
+                     async.done();
+                   });
+             }));
     });
 
     describe('dependency injection', () => {
@@ -2023,6 +2048,32 @@ function declareTests({useJit}: {useJit: boolean}) {
   });
 }
 
+
+@Component({selector: 'cmp-with-default-interpolation', template: `{{text}}`})
+class ComponentWithDefaultInterpolation {
+  text = 'Default Interpolation';
+}
+
+@Component({
+  selector: 'cmp-with-custom-interpolation-a',
+  template: `<div>{%text%}</div>`,
+  interpolation: ['{%', '%}']
+})
+class ComponentWithCustomInterpolationA {
+  text = 'Custom Interpolation A';
+}
+
+@Component({
+  selector: 'cmp-with-custom-interpolation-b',
+  template:
+      `<div>{**text%}</div> (<cmp-with-default-interpolation></cmp-with-default-interpolation>)`,
+  interpolation: ['{**', '%}'],
+  directives: [ComponentWithDefaultInterpolation]
+})
+class ComponentWithCustomInterpolationB {
+  text = 'Custom Interpolation B';
+}
+
 @Injectable()
 class MyService {
   greeting: string;