fix(language-service): can't provide the Input and Output custom bind…

…ing 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
angular · Mar 1, 2021 · 1b1b65e · 1b1b65e
1 parent 27d55f6
commit 1b1b65e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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']);
+      });
     });
   });