From 85760cb170580c67b97b64a911db1e1ed996ba26 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Wed, 9 Dec 2020 12:52:04 +0000
Subject: [PATCH] test(compiler-cli): fix and re-enable compliance source-map
 tests (#40040)

These tests started failing because they had type-check
errors in their templates, and a recent commit turned on
full template type-checking by default.\

This commit fixes those templates and updates the expected
files as necessary.

PR Close #40040
---
 .../inline_templates/GOLDEN_PARTIAL.js        | 486 +++++++++++++++---
 ...ASES_FIXME_PETEBD.json => TEST_CASES.json} |   0
 .../i18n_message_interpolation_whitespace.js  |   4 +-
 .../i18n_message_interpolation_whitespace.ts  |   4 +-
 ...essage_interpolation_whitespace_partial.js |   4 +-
 .../i18n_message_placeholder.ts               |   1 +
 .../inline_templates/input_binding_class.ts   |   1 +
 .../inline_templates/input_binding_complex.js |   2 +-
 .../inline_templates/input_binding_complex.ts |   4 +-
 .../input_binding_complex_partial.js          |   2 +-
 .../input_binding_longhand.js                 |   2 +-
 .../input_binding_longhand.ts                 |   3 +-
 .../input_binding_longhand_partial.js         |   2 +-
 .../inline_templates/input_binding_simple.js  |   2 +-
 .../inline_templates/input_binding_simple.ts  |   3 +-
 .../input_binding_simple_partial.js           |   2 +-
 .../inline_templates/interpolation_basic.ts   |   1 +
 .../inline_templates/interpolation_complex.ts |   2 +
 .../interpolation_properties.ts               |   1 +
 .../interpolation_with_pipe.ts                |  11 +-
 .../output_binding_complex.ts                 |   1 +
 .../output_binding_longhand.ts                |   1 +
 .../inline_templates/output_binding_simple.ts |   1 +
 .../two_way_binding_longhand.ts               |  13 +-
 .../two_way_binding_simple.ts                 |  13 +-
 25 files changed, 464 insertions(+), 102 deletions(-)
 rename packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/{TEST_CASES_FIXME_PETEBD.json => TEST_CASES.json} (100%)

diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/GOLDEN_PARTIAL.js
index 616d4d3516..90c7460efe 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/GOLDEN_PARTIAL.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/GOLDEN_PARTIAL.js
@@ -124,6 +124,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<h3>Hello {{ name }}</h3>', isInline: true } });
@@ -138,12 +141,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_basic.js","sourceRoot":"","sources":["../interpolation_basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
+{"version":3,"file":"interpolation_basic.js","sourceRoot":"","sources":["../interpolation_basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -154,6 +158,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<h3>Hello {{ name }}</h3>', isInline: true } });
@@ -168,12 +175,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_basic.js","sourceRoot":"","sources":["../interpolation_basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
+{"version":3,"file":"interpolation_basic.js","sourceRoot":"","sources":["../interpolation_basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_basic.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -184,6 +192,10 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.greeting = '';
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<h2>{{ greeting + " " + name }}</h2>', isInline: true } });
@@ -198,12 +210,14 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_complex.js","sourceRoot":"","sources":["../interpolation_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
+{"version":3,"file":"interpolation_complex.js","sourceRoot":"","sources":["../interpolation_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,aAAQ,GAAW,EAAE,CAAC;QACtB,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAHY,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    greeting: string;
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -214,6 +228,10 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.greeting = '';
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<h2>{{ greeting + " " + name }}</h2>', isInline: true } });
@@ -228,12 +246,14 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_complex.js","sourceRoot":"","sources":["../interpolation_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
+{"version":3,"file":"interpolation_complex.js","sourceRoot":"","sources":["../interpolation_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,aAAQ,GAAW,EAAE,CAAC;QACtB,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAHY,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    greeting: string;
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -244,6 +264,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div id="{{name}}"></div>', isInline: true } });
@@ -258,12 +281,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_properties.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_properties.js","sourceRoot":"","sources":["../interpolation_properties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
+{"version":3,"file":"interpolation_properties.js","sourceRoot":"","sources":["../interpolation_properties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_properties.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -274,6 +298,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div id="{{name}}"></div>', isInline: true } });
@@ -288,12 +315,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_properties.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_properties.js","sourceRoot":"","sources":["../interpolation_properties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
+{"version":3,"file":"interpolation_properties.js","sourceRoot":"","sources":["../interpolation_properties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_properties.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -301,12 +329,12 @@ export declare class TestCmp {
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div>{{200.3 | percent : 2 }}</div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div>{{200.3 | percent : 2 }}</div>', isInline: true }, pipes: { "percent": function () { return PercentPipe; } } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -314,29 +342,57 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: '<div>{{200.3 | percent : 2 }}</div>',
             }]
     }], null, null); })();
+export class PercentPipe {
+    transform() { }
+}
+PercentPipe.ɵfac = function PercentPipe_Factory(t) { return new (t || PercentPipe)(); };
+PercentPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "percent", type: PercentPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(PercentPipe, [{
+        type: Pipe,
+        args: [{ name: 'percent' }]
+    }], null, null); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, PercentPipe] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, PercentPipe] }]
+    }], null, null); })();
 //# sourceMappingURL=interpolation_with_pipe.js.map
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_with_pipe.js","sourceRoot":"","sources":["../interpolation_with_pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC;kDAEpC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD"}
+{"version":3,"file":"interpolation_with_pipe.js","sourceRoot":"","sources":["../interpolation_with_pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;;AAMvE,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC,6DAMpC,WAAW;kDAJX,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD;;AAKD,MAAM,OAAO,WAAW;IACtB,SAAS,KAAI,CAAC;;sEADH,WAAW;6DAAX,WAAW;kDAAX,WAAW;cADvB,IAAI;eAAC,EAAC,IAAI,EAAE,SAAS,EAAC;;AAMvB,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBATT,OAAO,EAIP,WAAW;kDAKX,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.d.ts
  ****************************************************************************************************/
+import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class PercentPipe implements PipeTransform {
+    transform(): void;
+    static ɵfac: i0.ɵɵFactoryDef<PercentPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<PercentPipe, "percent">;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof PercentPipe], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, NgModule, Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div>{{200.3 | percent : 2 }}</div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div>{{200.3 | percent : 2 }}</div>', isInline: true }, pipes: { "percent": function () { return PercentPipe; } } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -344,19 +400,81 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: '<div>{{200.3 | percent : 2 }}</div>',
             }]
     }], null, null); })();
+export class PercentPipe {
+    transform() { }
+}
+PercentPipe.ɵfac = function PercentPipe_Factory(t) { return new (t || PercentPipe)(); };
+PercentPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "percent", type: PercentPipe, pure: true });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(PercentPipe, [{
+        type: Pipe,
+        args: [{ name: 'percent' }]
+    }], null, null); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, PercentPipe] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, PercentPipe] }]
+    }], null, null); })();
 //# sourceMappingURL=interpolation_with_pipe.js.map
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.js.map
  ****************************************************************************************************/
-{"version":3,"file":"interpolation_with_pipe.js","sourceRoot":"","sources":["../interpolation_with_pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC;kDAEpC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD"}
+{"version":3,"file":"interpolation_with_pipe.js","sourceRoot":"","sources":["../interpolation_with_pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;;AAMvE,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC,6DAMpC,WAAW;kDAJX,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD;;AAKD,MAAM,OAAO,WAAW;IACtB,SAAS,KAAI,CAAC;;sEADH,WAAW;6DAAX,WAAW;kDAAX,WAAW;cADvB,IAAI;eAAC,EAAC,IAAI,EAAE,SAAS,EAAC;;AAMvB,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBATT,OAAO,EAIP,WAAW;kDAKX,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: interpolation_with_pipe.d.ts
  ****************************************************************************************************/
+import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class PercentPipe implements PipeTransform {
+    transform(): void;
+    static ɵfac: i0.ɵɵFactoryDef<PercentPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDefWithMeta<PercentPipe, "percent">;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof PercentPipe], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: input_binding_simple.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
+}
+TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [title]="name"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
+        type: Component,
+        args: [{
+                selector: 'test-cmp',
+                template: '<div [title]="name"></div>',
+            }]
+    }], null, null); })();
+//# sourceMappingURL=input_binding_simple.js.map
+/****************************************************************************************************
+ * PARTIAL FILE: input_binding_simple.js.map
+ ****************************************************************************************************/
+{"version":3,"file":"input_binding_simple.js","sourceRoot":"","sources":["../input_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,4BAA4B;kDAE3B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,4BAA4B;aACvC"}
+/****************************************************************************************************
+ * PARTIAL FILE: input_binding_simple.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class TestCmp {
+    name: string;
+    static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_simple.js
@@ -364,56 +482,30 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [attr]="name"></div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [title]="name"></div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div [attr]="name"></div>',
+                template: '<div [title]="name"></div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=input_binding_simple.js.map
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_simple.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_simple.js","sourceRoot":"","sources":["../input_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
-/****************************************************************************************************
- * PARTIAL FILE: input_binding_simple.d.ts
- ****************************************************************************************************/
-import * as i0 from "@angular/core";
-export declare class TestCmp {
-    static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
-}
-
-/****************************************************************************************************
- * PARTIAL FILE: input_binding_simple.js
- ****************************************************************************************************/
-import { Component } from '@angular/core';
-import * as i0 from "@angular/core";
-export class TestCmp {
-}
-TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [attr]="name"></div>', isInline: true } });
-/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
-        type: Component,
-        args: [{
-                selector: 'test-cmp',
-                template: '<div [attr]="name"></div>',
-            }]
-    }], null, null); })();
-//# sourceMappingURL=input_binding_simple.js.map
-/****************************************************************************************************
- * PARTIAL FILE: input_binding_simple.js.map
- ****************************************************************************************************/
-{"version":3,"file":"input_binding_simple.js","sourceRoot":"","sources":["../input_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,2BAA2B;kDAE1B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,2BAA2B;aACtC"}
+{"version":3,"file":"input_binding_simple.js","sourceRoot":"","sources":["../input_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,4BAA4B;kDAE3B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,4BAA4B;aACvC"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_simple.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -424,26 +516,32 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.greeting = '';
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [attr]="greeting + name"></div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [title]="greeting + name"></div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div [attr]="greeting + name"></div>',
+                template: '<div [title]="greeting + name"></div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=input_binding_complex.js.map
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_complex.js","sourceRoot":"","sources":["../input_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
+{"version":3,"file":"input_binding_complex.js","sourceRoot":"","sources":["../input_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,aAAQ,GAAW,EAAE,CAAC;QACtB,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAHY,OAAO;6EAAP,OAAO,0DAFR,uCAAuC;kDAEtC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uCAAuC;aAClD"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    greeting: string;
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -454,26 +552,32 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.greeting = '';
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [attr]="greeting + name"></div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [title]="greeting + name"></div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div [attr]="greeting + name"></div>',
+                template: '<div [title]="greeting + name"></div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=input_binding_complex.js.map
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_complex.js","sourceRoot":"","sources":["../input_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,sCAAsC;kDAErC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,sCAAsC;aACjD"}
+{"version":3,"file":"input_binding_complex.js","sourceRoot":"","sources":["../input_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,aAAQ,GAAW,EAAE,CAAC;QACtB,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAHY,OAAO;6EAAP,OAAO,0DAFR,uCAAuC;kDAEtC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uCAAuC;aAClD"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    greeting: string;
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -484,26 +588,30 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div bind-attr="name"></div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div bind-title="name"></div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div bind-attr="name"></div>',
+                template: '<div bind-title="name"></div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=input_binding_longhand.js.map
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_longhand.js","sourceRoot":"","sources":["../input_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,8BAA8B;kDAE7B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,8BAA8B;aACzC"}
+{"version":3,"file":"input_binding_longhand.js","sourceRoot":"","sources":["../input_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,+BAA+B;kDAE9B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,+BAA+B;aAC1C"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_longhand.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -514,26 +622,30 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div bind-attr="name"></div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div bind-title="name"></div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div bind-attr="name"></div>',
+                template: '<div bind-title="name"></div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=input_binding_longhand.js.map
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_longhand.js","sourceRoot":"","sources":["../input_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,8BAA8B;kDAE7B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,8BAA8B;aACzC"}
+{"version":3,"file":"input_binding_longhand.js","sourceRoot":"","sources":["../input_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,+BAA+B;kDAE9B,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,+BAA+B;aAC1C"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_longhand.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -544,6 +656,7 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    doSomething() { }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<button (click)="doSomething()">Do it</button>', isInline: true } });
@@ -558,12 +671,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_simple.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_simple.js","sourceRoot":"","sources":["../output_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
+{"version":3,"file":"output_binding_simple.js","sourceRoot":"","sources":["../output_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAClB,WAAW,KAAI,CAAC;;8DADL,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_simple.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    doSomething(): void;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -574,6 +688,7 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    doSomething() { }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<button (click)="doSomething()">Do it</button>', isInline: true } });
@@ -588,12 +703,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_simple.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_simple.js","sourceRoot":"","sources":["../output_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
+{"version":3,"file":"output_binding_simple.js","sourceRoot":"","sources":["../output_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAClB,WAAW,KAAI,CAAC;;8DADL,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_simple.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    doSomething(): void;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -604,6 +720,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.items = [];
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: `<button (click)="items.push('item' + items.length)">Add Item</button>`, isInline: true } });
@@ -618,12 +737,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_complex.js","sourceRoot":"","sources":["../output_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,uEAAuE;kDAEtE,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uEAAuE;aAClF"}
+{"version":3,"file":"output_binding_complex.js","sourceRoot":"","sources":["../output_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,UAAK,GAAa,EAAE,CAAC;KACtB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,uEAAuE;kDAEtE,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uEAAuE;aAClF"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    items: string[];
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -634,6 +754,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.items = [];
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: `<button (click)="items.push('item' + items.length)">Add Item</button>`, isInline: true } });
@@ -648,12 +771,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_complex.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_complex.js","sourceRoot":"","sources":["../output_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,uEAAuE;kDAEtE,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uEAAuE;aAClF"}
+{"version":3,"file":"output_binding_complex.js","sourceRoot":"","sources":["../output_binding_complex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,UAAK,GAAa,EAAE,CAAC;KACtB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,uEAAuE;kDAEtE,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,uEAAuE;aAClF"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_complex.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    items: string[];
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -664,6 +788,7 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    doSomething() { }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<button on-click="doSomething()">Do it</button>', isInline: true } });
@@ -678,12 +803,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_longhand.js","sourceRoot":"","sources":["../output_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,iDAAiD;kDAEhD,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,iDAAiD;aAC5D"}
+{"version":3,"file":"output_binding_longhand.js","sourceRoot":"","sources":["../output_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAClB,WAAW,KAAI,CAAC;;8DADL,OAAO;6EAAP,OAAO,0DAFR,iDAAiD;kDAEhD,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,iDAAiD;aAC5D"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_longhand.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    doSomething(): void;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -694,6 +820,7 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    doSomething() { }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<button on-click="doSomething()">Do it</button>', isInline: true } });
@@ -708,12 +835,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"output_binding_longhand.js","sourceRoot":"","sources":["../output_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,iDAAiD;kDAEhD,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,iDAAiD;aAC5D"}
+{"version":3,"file":"output_binding_longhand.js","sourceRoot":"","sources":["../output_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAClB,WAAW,KAAI,CAAC;;8DADL,OAAO;6EAAP,OAAO,0DAFR,iDAAiD;kDAEhD,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,iDAAiD;aAC5D"}
 /****************************************************************************************************
  * PARTIAL FILE: output_binding_longhand.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    doSomething(): void;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -721,12 +849,15 @@ export declare class TestCmp {
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, NgModule, Output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input [(ngModel)]="name">', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input [(ngModel)]="name">', isInline: true }, directives: [{ type: function () { return NgModelDirective; }, selector: "[ngModel]", inputs: ["ngModel"], outputs: ["ngModelChanges"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -734,29 +865,69 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: 'Name: <input [(ngModel)]="name">',
             }]
     }], null, null); })();
+export class NgModelDirective {
+    constructor() {
+        this.ngModel = '';
+        this.ngModelChanges = new EventEmitter();
+    }
+}
+NgModelDirective.ɵfac = function NgModelDirective_Factory(t) { return new (t || NgModelDirective)(); };
+NgModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: NgModelDirective, selector: "[ngModel]", inputs: { ngModel: "ngModel" }, outputs: { ngModelChanges: "ngModelChanges" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NgModelDirective, [{
+        type: Directive,
+        args: [{ selector: '[ngModel]' }]
+    }], null, { ngModel: [{
+            type: Input
+        }], ngModelChanges: [{
+            type: Output
+        }] }); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, NgModelDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, NgModelDirective] }]
+    }], null, null); })();
 //# sourceMappingURL=two_way_binding_simple.js.map
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.js.map
  ****************************************************************************************************/
-{"version":3,"file":"two_way_binding_simple.js","sourceRoot":"","sources":["../two_way_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
+{"version":3,"file":"two_way_binding_simple.js","sourceRoot":"","sources":["../two_way_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;;AAM1F,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,kCAAkC,8DAOjC,gBAAgB;kDALhB,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C;;AAMD,MAAM,OAAO,gBAAgB;IAD7B;QAEW,YAAO,GAAW,EAAE,CAAC;QACpB,mBAAc,GAAyB,IAAI,YAAY,EAAE,CAAC;KACrE;;gFAHY,gBAAgB;sFAAhB,gBAAgB;kDAAhB,gBAAgB;cAD5B,SAAS;eAAC,EAAC,QAAQ,EAAE,WAAW,EAAC;gBAEvB,OAAO;kBAAf,KAAK;YACI,cAAc;kBAAvB,MAAM;;AAIT,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBAXT,OAAO,EAKP,gBAAgB;kDAMhB,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.d.ts
  ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class NgModelDirective {
+    ngModel: string;
+    ngModelChanges: EventEmitter<string>;
+    static ɵfac: i0.ɵɵFactoryDef<NgModelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<NgModelDirective, "[ngModel]", never, { "ngModel": "ngModel"; }, { "ngModelChanges": "ngModelChanges"; }, never>;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof NgModelDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, NgModule, Output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input [(ngModel)]="name">', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input [(ngModel)]="name">', isInline: true }, directives: [{ type: function () { return NgModelDirective; }, selector: "[ngModel]", inputs: ["ngModel"], outputs: ["ngModelChanges"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -764,29 +935,69 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: 'Name: <input [(ngModel)]="name">',
             }]
     }], null, null); })();
+export class NgModelDirective {
+    constructor() {
+        this.ngModel = '';
+        this.ngModelChanges = new EventEmitter();
+    }
+}
+NgModelDirective.ɵfac = function NgModelDirective_Factory(t) { return new (t || NgModelDirective)(); };
+NgModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: NgModelDirective, selector: "[ngModel]", inputs: { ngModel: "ngModel" }, outputs: { ngModelChanges: "ngModelChanges" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NgModelDirective, [{
+        type: Directive,
+        args: [{ selector: '[ngModel]' }]
+    }], null, { ngModel: [{
+            type: Input
+        }], ngModelChanges: [{
+            type: Output
+        }] }); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, NgModelDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, NgModelDirective] }]
+    }], null, null); })();
 //# sourceMappingURL=two_way_binding_simple.js.map
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.js.map
  ****************************************************************************************************/
-{"version":3,"file":"two_way_binding_simple.js","sourceRoot":"","sources":["../two_way_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
+{"version":3,"file":"two_way_binding_simple.js","sourceRoot":"","sources":["../two_way_binding_simple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;;AAM1F,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,kCAAkC,8DAOjC,gBAAgB;kDALhB,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C;;AAMD,MAAM,OAAO,gBAAgB;IAD7B;QAEW,YAAO,GAAW,EAAE,CAAC;QACpB,mBAAc,GAAyB,IAAI,YAAY,EAAE,CAAC;KACrE;;gFAHY,gBAAgB;sFAAhB,gBAAgB;kDAAhB,gBAAgB;cAD5B,SAAS;eAAC,EAAC,QAAQ,EAAE,WAAW,EAAC;gBAEvB,OAAO;kBAAf,KAAK;YACI,cAAc;kBAAvB,MAAM;;AAIT,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBAXT,OAAO,EAKP,gBAAgB;kDAMhB,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_simple.d.ts
  ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class NgModelDirective {
+    ngModel: string;
+    ngModelChanges: EventEmitter<string>;
+    static ɵfac: i0.ɵɵFactoryDef<NgModelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<NgModelDirective, "[ngModel]", never, { "ngModel": "ngModel"; }, { "ngModelChanges": "ngModelChanges"; }, never>;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof NgModelDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, NgModule, Output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input bindon-ngModel="name">', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input bindon-ngModel="name">', isInline: true }, directives: [{ type: function () { return NgModelDirective; }, selector: "[ngModel]", inputs: ["ngModel"], outputs: ["ngModelChanges"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -794,29 +1005,69 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: 'Name: <input bindon-ngModel="name">',
             }]
     }], null, null); })();
+export class NgModelDirective {
+    constructor() {
+        this.ngModel = '';
+        this.ngModelChanges = new EventEmitter();
+    }
+}
+NgModelDirective.ɵfac = function NgModelDirective_Factory(t) { return new (t || NgModelDirective)(); };
+NgModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: NgModelDirective, selector: "[ngModel]", inputs: { ngModel: "ngModel" }, outputs: { ngModelChanges: "ngModelChanges" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NgModelDirective, [{
+        type: Directive,
+        args: [{ selector: '[ngModel]' }]
+    }], null, { ngModel: [{
+            type: Input
+        }], ngModelChanges: [{
+            type: Output
+        }] }); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, NgModelDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, NgModelDirective] }]
+    }], null, null); })();
 //# sourceMappingURL=two_way_binding_longhand.js.map
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"two_way_binding_longhand.js","sourceRoot":"","sources":["../two_way_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC;kDAEpC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD"}
+{"version":3,"file":"two_way_binding_longhand.js","sourceRoot":"","sources":["../two_way_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;;AAM1F,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,qCAAqC,8DAOpC,gBAAgB;kDALhB,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD;;AAMD,MAAM,OAAO,gBAAgB;IAD7B;QAEW,YAAO,GAAW,EAAE,CAAC;QACpB,mBAAc,GAAyB,IAAI,YAAY,EAAE,CAAC;KACrE;;gFAHY,gBAAgB;sFAAhB,gBAAgB;kDAAhB,gBAAgB;cAD5B,SAAS;eAAC,EAAC,QAAQ,EAAE,WAAW,EAAC;gBAEvB,OAAO;kBAAf,KAAK;YACI,cAAc;kBAAvB,MAAM;;AAIT,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBAXT,OAAO,EAKP,gBAAgB;kDAMhB,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.d.ts
  ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class NgModelDirective {
+    ngModel: string;
+    ngModelChanges: EventEmitter<string>;
+    static ɵfac: i0.ɵɵFactoryDef<NgModelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<NgModelDirective, "[ngModel]", never, { "ngModel": "ngModel"; }, { "ngModelChanges": "ngModelChanges"; }, never>;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof NgModelDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.js
  ****************************************************************************************************/
-import { Component } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, NgModule, Output } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input bindon-ngModel="name">', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: 'Name: <input bindon-ngModel="name">', isInline: true }, directives: [{ type: function () { return NgModelDirective; }, selector: "[ngModel]", inputs: ["ngModel"], outputs: ["ngModelChanges"] }] });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
@@ -824,19 +1075,56 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
                 template: 'Name: <input bindon-ngModel="name">',
             }]
     }], null, null); })();
+export class NgModelDirective {
+    constructor() {
+        this.ngModel = '';
+        this.ngModelChanges = new EventEmitter();
+    }
+}
+NgModelDirective.ɵfac = function NgModelDirective_Factory(t) { return new (t || NgModelDirective)(); };
+NgModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ version: "0.0.0-PLACEHOLDER", type: NgModelDirective, selector: "[ngModel]", inputs: { ngModel: "ngModel" }, outputs: { ngModelChanges: "ngModelChanges" }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NgModelDirective, [{
+        type: Directive,
+        args: [{ selector: '[ngModel]' }]
+    }], null, { ngModel: [{
+            type: Input
+        }], ngModelChanges: [{
+            type: Output
+        }] }); })();
+export class AppModule {
+}
+AppModule.ɵmod = i0.ɵɵdefineNgModule({ type: AppModule });
+AppModule.ɵinj = i0.ɵɵdefineInjector({ factory: function AppModule_Factory(t) { return new (t || AppModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppModule, { declarations: [TestCmp, NgModelDirective] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AppModule, [{
+        type: NgModule,
+        args: [{ declarations: [TestCmp, NgModelDirective] }]
+    }], null, null); })();
 //# sourceMappingURL=two_way_binding_longhand.js.map
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.js.map
  ****************************************************************************************************/
-{"version":3,"file":"two_way_binding_longhand.js","sourceRoot":"","sources":["../two_way_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,qCAAqC;kDAEpC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD"}
+{"version":3,"file":"two_way_binding_longhand.js","sourceRoot":"","sources":["../two_way_binding_longhand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;;AAM1F,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,qCAAqC,8DAOpC,gBAAgB;kDALhB,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,qCAAqC;aAChD;;AAMD,MAAM,OAAO,gBAAgB;IAD7B;QAEW,YAAO,GAAW,EAAE,CAAC;QACpB,mBAAc,GAAyB,IAAI,YAAY,EAAE,CAAC;KACrE;;gFAHY,gBAAgB;sFAAhB,gBAAgB;kDAAhB,gBAAgB;cAD5B,SAAS;eAAC,EAAC,QAAQ,EAAE,WAAW,EAAC;gBAEvB,OAAO;kBAAf,KAAK;YACI,cAAc;kBAAvB,MAAM;;AAIT,MAAM,OAAO,SAAS;;6CAAT,SAAS;iGAAT,SAAS;wFAAT,SAAS,mBAXT,OAAO,EAKP,gBAAgB;kDAMhB,SAAS;cADrB,QAAQ;eAAC,EAAC,YAAY,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAAC"}
 /****************************************************************************************************
  * PARTIAL FILE: two_way_binding_longhand.d.ts
  ****************************************************************************************************/
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
+export declare class NgModelDirective {
+    ngModel: string;
+    ngModelChanges: EventEmitter<string>;
+    static ɵfac: i0.ɵɵFactoryDef<NgModelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<NgModelDirective, "[ngModel]", never, { "ngModel": "ngModel"; }, { "ngModelChanges": "ngModelChanges"; }, never>;
+}
+export declare class AppModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<AppModule, [typeof TestCmp, typeof NgModelDirective], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<AppModule>;
+}
 
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_class.js
@@ -844,6 +1132,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.isInitial = true;
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [class.initial]="isInitial">Message</div>', isInline: true } });
@@ -858,12 +1149,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_class.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_class.js","sourceRoot":"","sources":["../input_binding_class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
+{"version":3,"file":"input_binding_class.js","sourceRoot":"","sources":["../input_binding_class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,cAAS,GAAY,IAAI,CAAC;KAC3B;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_class.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    isInitial: boolean;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -874,6 +1166,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.isInitial = true;
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div [class.initial]="isInitial">Message</div>', isInline: true } });
@@ -888,12 +1183,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_class.js.map
  ****************************************************************************************************/
-{"version":3,"file":"input_binding_class.js","sourceRoot":"","sources":["../input_binding_class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
+{"version":3,"file":"input_binding_class.js","sourceRoot":"","sources":["../input_binding_class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,cAAS,GAAY,IAAI,CAAC;KAC3B;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,gDAAgD;kDAE/C,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,gDAAgD;aAC3D"}
 /****************************************************************************************************
  * PARTIAL FILE: input_binding_class.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    isInitial: boolean;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -1288,6 +1584,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n>Hello, {{name}}!</div>', isInline: true } });
@@ -1302,12 +1601,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_placeholder.js.map
  ****************************************************************************************************/
-{"version":3,"file":"i18n_message_placeholder.js","sourceRoot":"","sources":["../i18n_message_placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
+{"version":3,"file":"i18n_message_placeholder.js","sourceRoot":"","sources":["../i18n_message_placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_placeholder.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -1318,6 +1618,9 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.name = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
 TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n>Hello, {{name}}!</div>', isInline: true } });
@@ -1332,12 +1635,13 @@ TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type:
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_placeholder.js.map
  ****************************************************************************************************/
-{"version":3,"file":"i18n_message_placeholder.js","sourceRoot":"","sources":["../i18n_message_placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
+{"version":3,"file":"i18n_message_placeholder.js","sourceRoot":"","sources":["../i18n_message_placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAMxC,MAAM,OAAO,OAAO;IAJpB;QAKE,SAAI,GAAW,EAAE,CAAC;KACnB;;8DAFY,OAAO;6EAAP,OAAO,0DAFR,kCAAkC;kDAEjC,OAAO;cAJnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,kCAAkC;aAC7C"}
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_placeholder.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    name: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -1348,26 +1652,32 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.titleValue = '';
+        this.bodyValue = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>',
+                template: '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=i18n_message_interpolation_whitespace.js.map
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_interpolation_whitespace.js.map
  ****************************************************************************************************/
-{"version":3,"file":"i18n_message_interpolation_whitespace.js","sourceRoot":"","sources":["../i18n_message_interpolation_whitespace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAOxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFd,iHAAiH;kDAE1G,OAAO;cALnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EACJ,iHAAiH;aACtH"}
+{"version":3,"file":"i18n_message_interpolation_whitespace.js","sourceRoot":"","sources":["../i18n_message_interpolation_whitespace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAOxC,MAAM,OAAO,OAAO;IALpB;QAME,eAAU,GAAW,EAAE,CAAC;QACxB,cAAS,GAAW,EAAE,CAAC;KACxB;;8DAHY,OAAO;6EAAP,OAAO,0DAFd,+GAA+G;kDAExG,OAAO;cALnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EACJ,+GAA+G;aACpH"}
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_interpolation_whitespace.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    titleValue: string;
+    bodyValue: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
@@ -1378,26 +1688,32 @@ export declare class TestCmp {
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class TestCmp {
+    constructor() {
+        this.titleValue = '';
+        this.bodyValue = '';
+    }
 }
 TestCmp.ɵfac = function TestCmp_Factory(t) { return new (t || TestCmp)(); };
-TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>', isInline: true } });
+TestCmp.ɵcmp = i0.ɵɵngDeclareComponent({ version: "0.0.0-PLACEHOLDER", type: TestCmp, selector: "test-cmp", ngImport: i0, template: { source: '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>', isInline: true } });
 /*@__PURE__*/ (function () { i0.ɵsetClassMetadata(TestCmp, [{
         type: Component,
         args: [{
                 selector: 'test-cmp',
-                template: '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>',
+                template: '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>',
             }]
     }], null, null); })();
 //# sourceMappingURL=i18n_message_interpolation_whitespace.js.map
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_interpolation_whitespace.js.map
  ****************************************************************************************************/
-{"version":3,"file":"i18n_message_interpolation_whitespace.js","sourceRoot":"","sources":["../i18n_message_interpolation_whitespace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAOxC,MAAM,OAAO,OAAO;;8DAAP,OAAO;6EAAP,OAAO,0DAFd,iHAAiH;kDAE1G,OAAO;cALnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EACJ,iHAAiH;aACtH"}
+{"version":3,"file":"i18n_message_interpolation_whitespace.js","sourceRoot":"","sources":["../i18n_message_interpolation_whitespace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;;AAOxC,MAAM,OAAO,OAAO;IALpB;QAME,eAAU,GAAW,EAAE,CAAC;QACxB,cAAS,GAAW,EAAE,CAAC;KACxB;;8DAHY,OAAO;6EAAP,OAAO,0DAFd,+GAA+G;kDAExG,OAAO;cALnB,SAAS;eAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EACJ,+GAA+G;aACpH"}
 /****************************************************************************************************
  * PARTIAL FILE: i18n_message_interpolation_whitespace.d.ts
  ****************************************************************************************************/
 import * as i0 from "@angular/core";
 export declare class TestCmp {
+    titleValue: string;
+    bodyValue: string;
     static ɵfac: i0.ɵɵFactoryDef<TestCmp, never>;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never, never>;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/TEST_CASES_FIXME_PETEBD.json b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/TEST_CASES.json
similarity index 100%
rename from packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/TEST_CASES_FIXME_PETEBD.json
rename to packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/TEST_CASES.json
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js
index 4bfcc0f529..f4f847d5a3 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js
@@ -1,9 +1,9 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{title_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
 }:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{body_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
 }:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
 …
 i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.ts
index 4019a72d38..fd22328dc0 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.ts
@@ -3,7 +3,9 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'test-cmp',
   template:
-      '<div i18n title="  pre-title {{title_value}}  post-title" i18n-title>  pre-body {{body_value}}  post-body</div>',
+      '<div i18n title="  pre-title {{titleValue}}  post-title" i18n-title>  pre-body {{bodyValue}}  post-body</div>',
 })
 export class TestCmp {
+  titleValue: string = '';
+  bodyValue: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js
index 7d405b1f94..f58d1a41c5 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js
@@ -1,9 +1,9 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{title_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
 }:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title" i18n-title>
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{body_value}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
 }:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
 …
 .ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.ts
index ae3a16f60b..d03e00d045 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div i18n>Hello, {{name}}!</div>',
 })
 export class TestCmp {
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.ts
index 4f6d9b85bc..296d73ce1f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div [class.initial]="isInitial">Message</div>',
 })
 export class TestCmp {
+  isInitial: boolean = true;
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js
index a96da43799..4873f9ebd2 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js
@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" [attr]="greeting + name"
+i0.ɵɵproperty("title", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.ts
index 360d130052..9942cb7d83 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.ts
@@ -2,7 +2,9 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div [attr]="greeting + name"></div>',
+  template: '<div [title]="greeting + name"></div>',
 })
 export class TestCmp {
+  greeting: string = '';
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js
index 46aec8c098..f3f964281e 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js
@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", ctx.greeting // SOURCE: "/input_binding_complex.ts" [attr]="greeting + name"></div>'
+.ɵɵproperty("title", ctx.greeting // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"></div>'
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js
index 33e11a5248..52704c2f06 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js
@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.name) // SOURCE: "/input_binding_longhand.ts" bind-attr="name"
+i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_longhand.ts" bind-title="name"
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.ts
index f720ff943d..94dd673d70 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.ts
@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div bind-attr="name"></div>',
+  template: '<div bind-title="name"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand_partial.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand_partial.js
index 1da4a0d936..2f15162b0c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand_partial.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand_partial.js
@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", ctx. // SOURCE: "/input_binding_longhand.ts" bind-attr="name"></div>'
+.ɵɵproperty("title", ctx. // SOURCE: "/input_binding_longhand.ts" bind-title="name"></div>'
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.js
index 88fdb74810..040cbace12 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.js
@@ -1,3 +1,3 @@
 i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_simple.ts" <div 
 …
-i0.ɵɵproperty("attr", ctx.name) // SOURCE: "/input_binding_simple.ts" [attr]="name"
+i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_simple.ts" [title]="name"
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.ts
index 541d93801a..90822e92b1 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple.ts
@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
-  template: '<div [attr]="name"></div>',
+  template: '<div [title]="name"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple_partial.js b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple_partial.js
index 7868ebe5ea..71c21b3959 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple_partial.js
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_simple_partial.js
@@ -1,4 +1,4 @@
 .ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_simple.ts" <div 
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("attr", c // SOURCE: "/input_binding_simple.ts" [attr]="name"></div>'
+.ɵɵproperty("title", c // SOURCE: "/input_binding_simple.ts" [title]="name"></div>'
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_basic.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_basic.ts
index c14139f2e3..7ff59a6c65 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_basic.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_basic.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<h3>Hello {{ name }}</h3>',
 })
 export class TestCmp {
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_complex.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_complex.ts
index 4753634912..c69a73d7af 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_complex.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_complex.ts
@@ -5,4 +5,6 @@ import {Component} from '@angular/core';
   template: '<h2>{{ greeting + " " + name }}</h2>',
 })
 export class TestCmp {
+  greeting: string = '';
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_properties.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_properties.ts
index 9d06a325b7..a15a3e4512 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_properties.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_properties.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<div id="{{name}}"></div>',
 })
 export class TestCmp {
+  name: string = '';
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_with_pipe.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_with_pipe.ts
index 91dece8e44..090591a54c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_with_pipe.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/interpolation_with_pipe.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, NgModule, Pipe, PipeTransform} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
@@ -6,3 +6,12 @@ import {Component} from '@angular/core';
 })
 export class TestCmp {
 }
+
+@Pipe({name: 'percent'})
+export class PercentPipe implements PipeTransform {
+  transform() {}
+}
+
+@NgModule({declarations: [TestCmp, PercentPipe]})
+export class AppModule {
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex.ts
index 4cdfb86138..1ec70aadf9 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: `<button (click)="items.push('item' + items.length)">Add Item</button>`,
 })
 export class TestCmp {
+  items: string[] = [];
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_longhand.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_longhand.ts
index e5e3bbc96c..54e53afb1f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_longhand.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_longhand.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<button on-click="doSomething()">Do it</button>',
 })
 export class TestCmp {
+  doSomething() {}
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple.ts
index 877d152d68..fb6976cd0a 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple.ts
@@ -5,4 +5,5 @@ import {Component} from '@angular/core';
   template: '<button (click)="doSomething()">Do it</button>',
 })
 export class TestCmp {
+  doSomething() {}
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.ts
index c1df5985e7..ac9ca8031f 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand.ts
@@ -1,8 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, Directive, EventEmitter, Input, NgModule, Output} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
   template: 'Name: <input bindon-ngModel="name">',
 })
 export class TestCmp {
+  name: string = '';
+}
+
+@Directive({selector: '[ngModel]'})
+export class NgModelDirective {
+  @Input() ngModel: string = '';
+  @Output() ngModelChanges: EventEmitter<string> = new EventEmitter();
+}
+
+@NgModule({declarations: [TestCmp, NgModelDirective]})
+export class AppModule {
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.ts b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.ts
index b662a4e819..f62a694df4 100644
--- a/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.ts
+++ b/packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple.ts
@@ -1,8 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, Directive, EventEmitter, Input, NgModule, Output} from '@angular/core';
 
 @Component({
   selector: 'test-cmp',
   template: 'Name: <input [(ngModel)]="name">',
 })
 export class TestCmp {
+  name: string = '';
+}
+
+@Directive({selector: '[ngModel]'})
+export class NgModelDirective {
+  @Input() ngModel: string = '';
+  @Output() ngModelChanges: EventEmitter<string> = new EventEmitter();
+}
+
+@NgModule({declarations: [TestCmp, NgModelDirective]})
+export class AppModule {
 }