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

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;
         }

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']);
+      });
     });
   });