From aaaa34021c2d56f798d20e5a1f31b23972055170 Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Wed, 3 Oct 2018 10:11:12 -0700
Subject: [PATCH] fix(ivy): sanitize tag name while generating listener
 function name (#26237)

PR Close #26237
---
 .../r3_view_compiler_listener_spec.ts         | 45 +++++++++++++++++++
 .../compiler/src/render3/view/template.ts     |  5 ++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
index 2b4bb092ab..5248ea4381 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
@@ -60,6 +60,51 @@ describe('compiler compliance: listen()', () => {
     expectEmit(result.source, template, 'Incorrect template');
   });
 
+  it('should create listener instruction on other components', () => {
+    const files = {
+      app: {
+        'spec.ts': `
+              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 {}
+          `
+      }
+    };
+
+    const template = `
+        const $e0_attrs$ = [${AttributeMarker.SelectOnly}, "click"];
+        …
+        template: function MyComponent_Template(rf, ctx) {
+          if (rf & 1) {
+            $r3$.ɵelementStart(0, "my-app", $e0_attrs$);
+            $r3$.ɵlistener("click", function MyComponent_Template_my_app_click_listener($event) {
+              return ctx.onClick($event);
+            });
+            $r3$.ɵelementEnd();
+          }
+        }
+        `;
+
+    const result = compile(files, angularFiles);
+
+    expectEmit(result.source, template, 'Incorrect template');
+  });
+
   it('should create multiple listener instructions that share a view snapshot', () => {
     const files = {
       app: {
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
index 68a4445f28..abaa195e12 100644
--- a/packages/compiler/src/render3/view/template.ts
+++ b/packages/compiler/src/render3/view/template.ts
@@ -940,8 +940,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
   }
 
   private prepareListenerParameter(tagName: string, outputAst: t.BoundEvent): () => o.Expression[] {
-    const evName = sanitizeIdentifier(outputAst.name);
-    const functionName = `${this.templateName}_${tagName}_${evName}_listener`;
+    const evNameSanitized = sanitizeIdentifier(outputAst.name);
+    const tagNameSanitized = sanitizeIdentifier(tagName);
+    const functionName = `${this.templateName}_${tagNameSanitized}_${evNameSanitized}_listener`;
 
     return () => {