diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js
index 630432f8a7..8d2618797c 100644
--- a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_input_outputs/GOLDEN_PARTIAL.js
@@ -97,3 +97,4 @@ export declare class MyModule {
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyDirective], never, never>;
     static ɵinj: i0.ɵɵInjectorDef<MyModule>;
 }
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js
new file mode 100644
index 0000000000..2283a3d154
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/GOLDEN_PARTIAL.js
@@ -0,0 +1,510 @@
+/****************************************************************************************************
+ * PARTIAL FILE: element_listener.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    onClick(event) { }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div (click)="onClick($event); 1 == 2"></div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: `<div (click)="onClick($event); 1 == 2"></div>` }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: element_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    onClick(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: component_listener.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyApp {
+}
+MyApp.ɵfac = function MyApp_Factory(t) { return new (t || MyApp)(); };
+MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyApp, selector: "my-app", ngImport: i0, template: { source: `<div>My App</div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyApp, [{
+        type: Component,
+        args: [{ selector: 'my-app', template: `<div>My App</div>` }]
+    }], null, null); })();
+export class MyComponent {
+    onClick(event) { }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<my-app (click)="onClick($event);"></my-app>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ selector: 'my-component', template: `<my-app (click)="onClick($event);"></my-app>` }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: component_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyApp {
+    static ɵfac: i0.ɵɵFactoryDef<MyApp, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyApp, "my-app", never, {}, {}, never, never>;
+}
+export declare class MyComponent {
+    onClick(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: shared_snapshot_listeners.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    onClick(name) { }
+    onClick2(name) { }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <div *ngIf="showing">
+      <div (click)="onClick(foo)"></div>
+      <button (click)="onClick2(bar)"></button>
+    </div>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <div *ngIf="showing">
+      <div (click)="onClick(foo)"></div>
+      <button (click)="onClick2(bar)"></button>
+    </div>
+  `
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: shared_snapshot_listeners.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    onClick(name: any): void;
+    onClick2(name: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: local_ref_before_listener.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+    <button (click)="onClick(user.value)">Save</button>
+    <input #user>
+  `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+    <button (click)="onClick(user.value)">Save</button>
+    <input #user>
+  `
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: local_ref_before_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: same_element_chained_listeners.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<div (click)="click()" (change)="change()"></div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `<div (click)="click()" (change)="change()"></div>`,
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: same_element_chained_listeners.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: cross_element_chained_listeners.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `
+      <div (click)="click()" (change)="change()"></div>
+      <some-comp (update)="update()" (delete)="delete()"></some-comp>
+    `, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `
+      <div (click)="click()" (change)="change()"></div>
+      <some-comp (update)="update()" (delete)="delete()"></some-comp>
+    `
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: cross_element_chained_listeners.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: template_chained_listeners.js
+ ****************************************************************************************************/
+import { Component, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "my-component", ngImport: i0, template: { source: `<ng-template (click)="click()" (change)="change()"></ng-template>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                selector: 'my-component',
+                template: `<ng-template (click)="click()" (change)="change()"></ng-template>`
+            }]
+    }], null, null); })();
+export class MyModule {
+}
+MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });
+MyModule.ɵinj = i0.ɵɵdefineInjector({ factory: function MyModule_Factory(t) { return new (t || MyModule)(); } });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MyModule, { declarations: [MyComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyModule, [{
+        type: NgModule,
+        args: [{ declarations: [MyComponent] }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: template_chained_listeners.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "my-component", never, {}, {}, never, never>;
+}
+export declare class MyModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MyModule, [typeof MyComponent], never, never>;
+    static ɵinj: i0.ɵɵInjectorDef<MyModule>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_event_arg_listener.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    onClick() { }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "ng-component", ngImport: i0, template: { source: `<div (click)="onClick();"></div>`, isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{ template: `<div (click)="onClick();"></div>` }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_event_arg_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_event_arg_host_listener.js
+ ****************************************************************************************************/
+import { Component, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    mousedown() { }
+    click() {
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: MyComponent, selector: "ng-component", host: { listeners: { "mousedown": "mousedown()", "click": "click()" } }, ngImport: i0, template: { source: '', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Component,
+        args: [{
+                template: '',
+                host: {
+                    '(mousedown)': 'mousedown()',
+                }
+            }]
+    }], null, { click: [{
+            type: HostListener,
+            args: ['click']
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: no_event_arg_host_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    mousedown(): void;
+    click(): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MyComponent, "ng-component", never, {}, {}, never, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: has_event_arg_host_listener.js
+ ****************************************************************************************************/
+import { Directive, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+export class MyComponent {
+    click(target) {
+    }
+}
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
+MyComponent.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: MyComponent, host: { listeners: { "click": "click($event.target)" } }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MyComponent, [{
+        type: Directive
+    }], null, { click: [{
+            type: HostListener,
+            args: ['click', ['$event.target']]
+        }] }); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: has_event_arg_host_listener.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class MyComponent {
+    click(target: any): void;
+    static ɵfac: i0.ɵɵFactoryDef<MyComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MyComponent, never, never, {}, {}, never>;
+}
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_arg_listener_implicit_meaning.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+class Comp {
+    c(event) { }
+}
+Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div (click)="c($event)"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{ template: '<div (click)="c($event)"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_arg_listener_implicit_meaning.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_explicit_access.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+class Comp {
+    constructor() {
+        this.$event = {};
+    }
+    c(value) { }
+}
+Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div (click)="c(this.$event)"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{ template: '<div (click)="c(this.$event)"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_explicit_access.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_in_property_binding.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+class Comp {
+    constructor() {
+        this.$event = 1;
+    }
+}
+Comp.ɵfac = function Comp_Factory(t) { return new (t || Comp)(); };
+Comp.ɵcmp = i0.ɵɵngDeclareComponent({ version: 1, type: Comp, selector: "ng-component", ngImport: i0, template: { source: '<div [event]="$event"></div>', isInline: true } });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Comp, [{
+        type: Component,
+        args: [{ template: '<div [event]="$event"></div>' }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_in_property_binding.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_arg_host_listener_implicit_meaning.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+class Dir {
+    c(event) { }
+}
+Dir.ɵfac = function Dir_Factory(t) { return new (t || Dir)(); };
+Dir.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: Dir, host: { listeners: { "click": "c($event)" } }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Dir, [{
+        type: Directive,
+        args: [{ host: { '(click)': 'c($event)' } }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_arg_host_listener_implicit_meaning.d.ts
+ ****************************************************************************************************/
+export {};
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_host_explicit_access.js
+ ****************************************************************************************************/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+class Dir {
+    constructor() {
+        this.$event = {};
+    }
+    c(value) { }
+}
+Dir.ɵfac = function Dir_Factory(t) { return new (t || Dir)(); };
+Dir.ɵdir = i0.ɵɵngDeclareDirective({ version: 1, type: Dir, host: { listeners: { "click": "c(this.$event)" } }, ngImport: i0 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Dir, [{
+        type: Directive,
+        args: [{
+                host: {
+                    '(click)': 'c(this.$event)',
+                }
+            }]
+    }], null, null); })();
+
+/****************************************************************************************************
+ * PARTIAL FILE: event_host_explicit_access.d.ts
+ ****************************************************************************************************/
+export {};
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json
new file mode 100644
index 0000000000..7a46d6f143
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/TEST_CASES.json
@@ -0,0 +1,269 @@
+{
+  "$schema": "../test_case_schema.json",
+  "cases": [
+    {
+      "description": "should create listener instruction on element",
+      "inputFiles": [
+        "element_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "element_listener_template.js",
+              "generated": "element_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should create listener instruction on other components",
+      "inputFiles": [
+        "component_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "component_listener_template.js",
+              "generated": "component_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should create multiple listener instructions that share a view snapshot",
+      "inputFiles": [
+        "shared_snapshot_listeners.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "shared_snapshot_listeners_template.js",
+              "generated": "shared_snapshot_listeners.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "local refs in listeners defined before the local refs",
+      "inputFiles": [
+        "local_ref_before_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "local_ref_before_listener_template.js",
+              "generated": "local_ref_before_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        },
+        {
+          "files": [
+            {
+              "expected": "local_ref_before_listener_factory.js",
+              "generated": "local_ref_before_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect factory"
+        }
+      ]
+    },
+    {
+      "description": "should chain multiple listeners on the same element",
+      "inputFiles": [
+        "same_element_chained_listeners.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "same_element_chained_listeners_template.js",
+              "generated": "same_element_chained_listeners.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should chain multiple listeners across elements",
+      "inputFiles": [
+        "cross_element_chained_listeners.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "cross_element_chained_listeners_template.js",
+              "generated": "cross_element_chained_listeners.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should chain multiple listeners on the same template",
+      "inputFiles": [
+        "template_chained_listeners.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "template_chained_listeners_template.js",
+              "generated": "template_chained_listeners.js"
+            }
+          ],
+          "failureMessage": "Incorrect template"
+        }
+      ]
+    },
+    {
+      "description": "should not generate the $event argument if it is not being used in a template",
+      "inputFiles": [
+        "no_event_arg_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "no_event_arg_listener_template.js",
+              "generated": "no_event_arg_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should not generate the $event argument if it is not being used in a host listener",
+      "inputFiles": [
+        "no_event_arg_host_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "no_event_arg_host_listener_host_bindings.js",
+              "generated": "no_event_arg_host_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should generate the $event argument if it is being used in a host listener",
+      "inputFiles": [
+        "has_event_arg_host_listener.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "has_event_arg_host_listener_host_bindings.js",
+              "generated": "has_event_arg_host_listener.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should assume $event is referring to the event variable in a listener by default",
+      "inputFiles": [
+        "event_arg_listener_implicit_meaning.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "event_arg_listener_implicit_meaning_template.js",
+              "generated": "event_arg_listener_implicit_meaning.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should preserve accesses to $event if it is done through `this` in a listener",
+      "inputFiles": [
+        "event_explicit_access.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "event_explicit_access_template.js",
+              "generated": "event_explicit_access.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should not assume that $event is referring to an event object inside a property",
+      "inputFiles": [
+        "event_in_property_binding.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "event_in_property_binding_template.js",
+              "generated": "event_in_property_binding.js"
+            }
+          ],
+          "failureMessage": "Incorrect property binding"
+        }
+      ]
+    },
+    {
+      "description": "should assume $event is referring to the event variable in a listener by default inside a host binding",
+      "inputFiles": [
+        "event_arg_host_listener_implicit_meaning.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "event_arg_host_listener_implicit_meaning_host_bindings.js",
+              "generated": "event_arg_host_listener_implicit_meaning.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    },
+    {
+      "description": "should preserve accesses to $event if it is done through `this` in a listener inside a host binding",
+      "inputFiles": [
+        "event_host_explicit_access.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "event_host_explicit_access_host_bindings.js",
+              "generated": "event_host_explicit_access.js"
+            }
+          ],
+          "failureMessage": "Incorrect event listener"
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts
new file mode 100644
index 0000000000..a52959bdaf
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener.ts
@@ -0,0 +1,14 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'my-app', template: `<div>My App</div>`})
+export class MyApp {
+}
+
+@Component({selector: 'my-component', template: `<my-app (click)="onClick($event);"></my-app>`})
+export class MyComponent {
+  onClick(event: any) {}
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js
new file mode 100644
index 0000000000..c5798ccf87
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/component_listener_template.js
@@ -0,0 +1,11 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "my-app", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_my_app_click_0_listener($event) {
+      return ctx.onClick($event);
+    });
+    $r3$.ɵɵelementEnd();
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts
new file mode 100644
index 0000000000..e08d4e463d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners.ts
@@ -0,0 +1,15 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `
+      <div (click)="click()" (change)="change()"></div>
+      <some-comp (update)="update()" (delete)="delete()"></some-comp>
+    `
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js
new file mode 100644
index 0000000000..ae1288840a
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/cross_element_chained_listeners_template.js
@@ -0,0 +1,12 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click", "change"], [__AttributeMarker.Bindings__, "update", "delete"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() { return ctx.click(); })("change", function MyComponent_Template_div_change_0_listener() { return ctx.change(); });
+    $r3$.ɵɵelementEnd();
+    $r3$.ɵɵelementStart(1, "some-comp", 1);
+    $r3$.ɵɵlistener("update", function MyComponent_Template_some_comp_update_1_listener() { return ctx.update(); })("delete", function MyComponent_Template_some_comp_delete_1_listener() { return ctx.delete(); });
+    $r3$.ɵɵelementEnd();
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts
new file mode 100644
index 0000000000..c08dae8677
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener.ts
@@ -0,0 +1,10 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({selector: 'my-component', template: `<div (click)="onClick($event); 1 == 2"></div>`})
+export class MyComponent {
+  onClick(event: any) {}
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js
new file mode 100644
index 0000000000..f9ca44ea8d
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/element_listener_template.js
@@ -0,0 +1,12 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener($event) {
+      ctx.onClick($event);
+      return 1 == 2;
+    });
+    $r3$.ɵɵelementEnd();
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts
new file mode 100644
index 0000000000..5069c06fd4
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning.ts
@@ -0,0 +1,6 @@
+import {Directive} from '@angular/core';
+
+@Directive({host: {'(click)': 'c($event)'}})
+class Dir {
+  c(event: any) {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js
new file mode 100644
index 0000000000..762dad6d1c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_host_listener_implicit_meaning_host_bindings.js
@@ -0,0 +1,2 @@
+…
+i0.ɵɵlistener("click", function Dir_click_HostBindingHandler($event) { return ctx.c($event); });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts
new file mode 100644
index 0000000000..a9b958b87f
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning.ts
@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<div (click)="c($event)"></div>'})
+class Comp {
+  c(event: any) {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js
new file mode 100644
index 0000000000..e8287c49bd
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_arg_listener_implicit_meaning_template.js
@@ -0,0 +1,2 @@
+…
+i0.ɵɵlistener("click", function Comp_Template_div_click_0_listener($event) { return ctx.c($event); });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts
new file mode 100644
index 0000000000..dcb43321bb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<div (click)="c(this.$event)"></div>'})
+class Comp {
+  $event = {};
+
+  c(value: {}) {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js
new file mode 100644
index 0000000000..fb473cc5c6
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_explicit_access_template.js
@@ -0,0 +1,2 @@
+…
+i0.ɵɵlistener("click", function Comp_Template_div_click_0_listener() { return ctx.c(ctx.$event); });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts
new file mode 100644
index 0000000000..6c376a0d02
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access.ts
@@ -0,0 +1,11 @@
+import {Directive} from '@angular/core';
+
+@Directive({
+  host: {
+    '(click)': 'c(this.$event)',
+  }
+})
+class Dir {
+  $event = {};
+  c(value: {}) {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js
new file mode 100644
index 0000000000..0fe7a768c4
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_host_explicit_access_host_bindings.js
@@ -0,0 +1,2 @@
+…
+i0.ɵɵlistener("click", function Dir_click_HostBindingHandler() { return ctx.c(ctx.$event); });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts
new file mode 100644
index 0000000000..cce008a159
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding.ts
@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({template: '<div [event]="$event"></div>'})
+class Comp {
+  $event = 1;
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js
new file mode 100644
index 0000000000..b69d04e1c9
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/event_in_property_binding_template.js
@@ -0,0 +1,2 @@
+…
+i0.ɵɵproperty("event", ctx.$event);
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts
new file mode 100644
index 0000000000..c00ca4e736
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener.ts
@@ -0,0 +1,8 @@
+import {Directive, HostListener} from '@angular/core';
+
+@Directive()
+export class MyComponent {
+  @HostListener('click', ['$event.target'])
+  click(target: any) {
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js
new file mode 100644
index 0000000000..600c50ebb9
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/has_event_arg_host_listener_host_bindings.js
@@ -0,0 +1,8 @@
+…
+hostBindings: function MyComponent_HostBindings(rf, ctx) {
+  if (rf & 1) {
+    i0.ɵɵlistener("click", function MyComponent_click_HostBindingHandler($event) {
+        return ctx.click($event.target);
+    });
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts
new file mode 100644
index 0000000000..145de618a1
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener.ts
@@ -0,0 +1,15 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <button (click)="onClick(user.value)">Save</button>
+    <input #user>
+  `
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js
new file mode 100644
index 0000000000..65ff7f57f5
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_factory.js
@@ -0,0 +1 @@
+MyComponent.ɵfac = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js
new file mode 100644
index 0000000000..e0eadf6313
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/local_ref_before_listener_template.js
@@ -0,0 +1,23 @@
+…
+MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
+  type: MyComponent,
+  selectors: [["my-component"]],
+  decls: 4,
+  vars: 0,
+  consts: [[__AttributeMarker.Bindings__, "click"], ["user", ""]],
+  template:  function MyComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      const $s$ = $r3$.ɵɵgetCurrentView();
+      $r3$.ɵɵelementStart(0, "button", 0);
+        $r3$.ɵɵlistener("click", function MyComponent_Template_button_click_0_listener() {
+           $r3$.ɵɵrestoreView($s$);
+           const $user$ = $r3$.ɵɵreference(3);
+           return ctx.onClick($user$.value);
+        });
+        $r3$.ɵɵtext(1, "Save");
+      $r3$.ɵɵelementEnd();
+      $r3$.ɵɵelement(2, "input", null, 1);
+    }
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts
new file mode 100644
index 0000000000..b76130eb7e
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener.ts
@@ -0,0 +1,15 @@
+import {Component, HostListener} from '@angular/core';
+
+@Component({
+  template: '',
+  host: {
+    '(mousedown)': 'mousedown()',
+  }
+})
+export class MyComponent {
+  mousedown() {}
+
+  @HostListener('click')
+  click() {
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js
new file mode 100644
index 0000000000..fbfe416263
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_host_listener_host_bindings.js
@@ -0,0 +1,10 @@
+…
+hostBindings: function MyComponent_HostBindings(rf, ctx) {
+  if (rf & 1) {
+    i0.ɵɵlistener("mousedown", function MyComponent_mousedown_HostBindingHandler() {
+      return ctx.mousedown();
+    })("click", function MyComponent_click_HostBindingHandler() {
+      return ctx.click();
+    });
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts
new file mode 100644
index 0000000000..62267f3ffc
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener.ts
@@ -0,0 +1,6 @@
+import {Component} from '@angular/core';
+
+@Component({template: `<div (click)="onClick();"></div>`})
+export class MyComponent {
+  onClick() {}
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js
new file mode 100644
index 0000000000..47d9a4dcf7
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/no_event_arg_listener_template.js
@@ -0,0 +1,11 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() {
+      return ctx.onClick();
+    });
+    $r3$.ɵɵelementEnd();
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts
new file mode 100644
index 0000000000..26670776db
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners.ts
@@ -0,0 +1,12 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `<div (click)="click()" (change)="change()"></div>`,
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js
new file mode 100644
index 0000000000..ead0dd5518
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/same_element_chained_listeners_template.js
@@ -0,0 +1,13 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click", "change"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵelementStart(0, "div", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_div_click_0_listener() {
+      return ctx.click();
+    })("change", function MyComponent_Template_div_change_0_listener() {
+      return ctx.change();
+    });
+    $r3$.ɵɵelementEnd();
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts
new file mode 100644
index 0000000000..a7f60da992
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners.ts
@@ -0,0 +1,19 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `
+    <div *ngIf="showing">
+      <div (click)="onClick(foo)"></div>
+      <button (click)="onClick2(bar)"></button>
+    </div>
+  `
+})
+export class MyComponent {
+  onClick(name: any) {}
+  onClick2(name: any) {}
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js
new file mode 100644
index 0000000000..dbb3615127
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/shared_snapshot_listeners_template.js
@@ -0,0 +1,31 @@
+function MyComponent_div_0_Template(rf, ctx) {
+  if (rf & 1) {
+    const $s$ = $r3$.ɵɵgetCurrentView();
+    $r3$.ɵɵelementStart(0, "div");
+    $r3$.ɵɵelementStart(1, "div", 1);
+    $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_1_listener() {
+      $r3$.ɵɵrestoreView($s$);
+      const $comp$ = $r3$.ɵɵnextContext();
+      return $comp$.onClick($comp$.foo);
+    });
+    $r3$.ɵɵelementEnd();
+    $r3$.ɵɵelementStart(2, "button", 1);
+    $r3$.ɵɵlistener("click", function MyComponent_div_0_Template_button_click_2_listener() {
+      $r3$.ɵɵrestoreView($s$);
+      const $comp2$ = $r3$.ɵɵnextContext();
+      return $comp2$.onClick2($comp2$.bar);
+    });
+    $r3$.ɵɵelementEnd();
+    $r3$.ɵɵelementEnd();
+  }
+}
+// ...
+consts: [[__AttributeMarker.Template__, "ngIf"], [__AttributeMarker.Bindings__, "click"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 3, 0, "div", 0);
+  }
+  if (rf & 2) {
+    $i0$.ɵɵproperty("ngIf", ctx.showing);
+  }
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts
new file mode 100644
index 0000000000..cbec49e4fb
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners.ts
@@ -0,0 +1,12 @@
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'my-component',
+  template: `<ng-template (click)="click()" (change)="change()"></ng-template>`
+})
+export class MyComponent {
+}
+
+@NgModule({declarations: [MyComponent]})
+export class MyModule {
+}
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js
new file mode 100644
index 0000000000..6bdbcb3b0c
--- /dev/null
+++ b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_listener/template_chained_listeners_template.js
@@ -0,0 +1,8 @@
+…
+consts: [[__AttributeMarker.Bindings__, "click", "change"]],
+template: function MyComponent_Template(rf, ctx) {
+  if (rf & 1) {
+    $r3$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
+    $r3$.ɵɵlistener("click", function MyComponent_Template_ng_template_click_0_listener() { return ctx.click(); })("change", function MyComponent_Template_ng_template_change_0_listener() { return ctx.change(); });
+  }
+}