From 8110cf0ed247e836a4d77bdbfe2ad7111c3fa847 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 0bf92f8986..275a494343 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 98e6717862..2a555af61f 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']);
+      });
     });
   });