fix(compiler): support more than 9 interpolations (#12710)

Fixes #10253

modules/@angular/core/src/linker/view_utils.ts

@@ -45,9 +45,15 @@ export function addToArray(e: any, array: any[]) {
   array.push(e);
 }
 
-export const MAX_INTERPOLATION_VALUES = 9;
+export function interpolate(valueCount: number, constAndInterp: string[]): string {
+  let result = '';
+  for (let i = 0; i < valueCount * 2; i = i + 2) {
+    result = result + constAndInterp[i] + _toStringWithNull(constAndInterp[i + 1]);
+  }
+  return result + constAndInterp[valueCount * 2];
+}
 
-export function interpolate(
+export function inlineInterpolate(
     valueCount: number, c0: string, a1: any, c1: string, a2?: any, c2?: string, a3?: any,
     c3?: string, a4?: any, c4?: string, a5?: any, c5?: string, a6?: any, c6?: string, a7?: any,
     c7?: string, a8?: any, c8?: string, a9?: any, c9?: string): string {

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

@@ -70,6 +70,29 @@ function declareTests({useJit}: {useJit: boolean}) {
         expect(fixture.nativeElement).toHaveText('true|false');
       });
 
+      it('should support an arbitrary number of interpolations in an element', () => {
+        TestBed.configureTestingModule({declarations: [MyComp]});
+        const template =
+            `<div>before{{'0'}}a{{'1'}}b{{'2'}}c{{'3'}}d{{'4'}}e{{'5'}}f{{'6'}}g{{'7'}}h{{'8'}}i{{'9'}}j{{'10'}}after</div>`;
+        const fixture =
+            TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveText('before0a1b2c3d4e5f6g7h8i9j10after');
+      });
+
+      it('should use a blank string when interpolation evaluates to null or undefined with an arbitrary number of interpolations',
+         () => {
+           TestBed.configureTestingModule({declarations: [MyComp]});
+           const template =
+               `<div>0{{null}}a{{undefined}}b{{null}}c{{undefined}}d{{null}}e{{undefined}}f{{null}}g{{undefined}}h{{null}}i{{undefined}}j{{null}}1</div>`;
+           const fixture =
+               TestBed.overrideComponent(MyComp, {set: {template}}).createComponent(MyComp);
+
+           fixture.detectChanges();
+           expect(fixture.nativeElement).toHaveText('0abcdefghij1');
+         });
+
       it('should consume element binding changes', () => {
         TestBed.configureTestingModule({declarations: [MyComp]});
         const template = '<div [id]="ctxProp"></div>';