From 1b1b65e1ea4c0b2cde6a267db2ef070395cc09d8 Mon Sep 17 00:00:00 2001
From: ivanwonder <ivanwonder@outlook.com>
Date: Fri, 26 Feb 2021 10:51:41 +0800
Subject: [PATCH] fix(language-service): can't provide the Input and Output
 custom binding property name (#41005)

Now the language service always uses the name of the JavaScript property on the
component or directive instance for this input or output. This PR will use the right
binding property name.

PR Close #41005
---
 .../ivy/attribute_completions.ts              |  4 +-
 .../ivy/test/completions_spec.ts              | 38 +++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/language-service/ivy/attribute_completions.ts b/packages/language-service/ivy/attribute_completions.ts
index 0bf92f89868..275a4943433 100644
--- a/packages/language-service/ivy/attribute_completions.ts
+++ b/packages/language-service/ivy/attribute_completions.ts
@@ -203,7 +203,7 @@ export function buildAttributeCompletionTable(
         continue;
       }
 
-      for (const [propertyName, classPropertyName] of meta.inputs) {
+      for (const [classPropertyName, propertyName] of meta.inputs) {
         if (table.has(propertyName)) {
           continue;
         }
@@ -217,7 +217,7 @@ export function buildAttributeCompletionTable(
         });
       }
 
-      for (const [propertyName, classPropertyName] of meta.outputs) {
+      for (const [classPropertyName, propertyName] of meta.outputs) {
         if (table.has(propertyName)) {
           continue;
         }
diff --git a/packages/language-service/ivy/test/completions_spec.ts b/packages/language-service/ivy/test/completions_spec.ts
index 98e6717862b..2a555af61f7 100644
--- a/packages/language-service/ivy/test/completions_spec.ts
+++ b/packages/language-service/ivy/test/completions_spec.ts
@@ -52,6 +52,20 @@ const DIR_WITH_TWO_WAY_BINDING = {
   `
 };
 
+const DIR_WITH_BINDING_PROPERTY_NAME = {
+  'Dir': `
+    @Directive({
+      selector: '[dir]',
+      inputs: ['model: customModel'],
+      outputs: ['update: customModelChange'],
+    })
+    export class Dir {
+      model!: any;
+      update!: any;
+    }
+  `
+};
+
 const NG_FOR_DIR = {
   'NgFor': `
     @Directive({
@@ -563,6 +577,30 @@ describe('completions', () => {
             completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.EVENT),
             ['otherOutput']);
       });
+
+      it('should return input completions for a binding property name', () => {
+        const {templateFile} =
+            setup(`<h1 dir [customModel]></h1>`, ``, DIR_WITH_BINDING_PROPERTY_NAME);
+        templateFile.moveCursorToText('[customModel¦]');
+        const completions = templateFile.getCompletionsAtPosition();
+        expectReplacementText(completions, templateFile.contents, 'customModel');
+
+        expectContain(
+            completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.PROPERTY),
+            ['customModel']);
+      });
+
+      it('should return output completions for a binding property name', () => {
+        const {templateFile} =
+            setup(`<h1 dir (customModel)></h1>`, ``, DIR_WITH_BINDING_PROPERTY_NAME);
+        templateFile.moveCursorToText('(customModel¦)');
+        const completions = templateFile.getCompletionsAtPosition();
+        expectReplacementText(completions, templateFile.contents, 'customModel');
+
+        expectContain(
+            completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.EVENT),
+            ['customModelChange']);
+      });
     });
   });