fix(language-service): bound attributes should not break directive ma…

…tching (#41597)

The language service uses an elements attributes to determine if it
matches a directive in the component scope. We do this by accumulating
all attribute bindings and matching against the selectors for the
available directives. The compiler itself does a similar thing. In
addition, the compiler does not use the value of `BoundAttribute`s to
match directives (https://github.com/angular/angular/blob/cdf1ea1951fb7187b1f6c9bb8a847c859c41e0b8/packages/compiler/src/render3/view/util.ts#L174-L206). This commit changes the language
service to also ignore bound attribute values for directive matching.

Fixes angular/vscode-ng-language-service#1278

PR Close #41597

packages/language-service/ivy/test/quick_info_spec.ts

@@ -151,6 +151,15 @@ describe('quick info', () => {
         expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
       });
 
+      it('should work for components with bound attributes', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<t¦est-comp [attr.id]="'1' + '2'" [attr.name]="'myName'"></test-comp>`,
+          expectedSpanText: `<test-comp [attr.id]="'1' + '2'" [attr.name]="'myName'"></test-comp>`,
+          expectedDisplayString: '(component) AppModule.TestComponent'
+        });
+        expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
+      });
+
       it('should work for structural directives', () => {
         const {documentation} = expectQuickInfo({
           templateOverride: `<div *¦ngFor="let item of heroes"></div>`,

packages/language-service/ivy/utils.ts

@@ -171,7 +171,7 @@ function getFirstComponentForTemplateFile(fileName: string, compiler: NgCompiler
  * Given an attribute node, converts it to string form.
  */
 function toAttributeString(attribute: t.TextAttribute|t.BoundAttribute|t.BoundEvent): string {
-  if (attribute instanceof t.BoundEvent) {
+  if (attribute instanceof t.BoundEvent || attribute instanceof t.BoundAttribute) {
     return `[${attribute.name}]`;
   } else {
     return `[${attribute.name}=${attribute.valueSpan?.toString() ?? ''}]`;