From bd34bc9e89f18a4d3c4fc633bf5624bfbdc3d1a3 Mon Sep 17 00:00:00 2001
From: Andrew Scott <atscott@google.com>
Date: Tue, 13 Apr 2021 09:38:14 -0700
Subject: [PATCH] fix(language-service): bound attributes should not break
 directive matching (#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 https://github.com/angular/vscode-ng-language-service/issues/1278

PR Close #41597
---
 packages/language-service/ivy/test/quick_info_spec.ts | 9 +++++++++
 packages/language-service/ivy/utils.ts                | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/language-service/ivy/test/quick_info_spec.ts b/packages/language-service/ivy/test/quick_info_spec.ts
index 9c07fc3457..1160c80000 100644
--- a/packages/language-service/ivy/test/quick_info_spec.ts
+++ b/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>`,
diff --git a/packages/language-service/ivy/utils.ts b/packages/language-service/ivy/utils.ts
index f204763c62..977d49be78 100644
--- a/packages/language-service/ivy/utils.ts
+++ b/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() ?? ''}]`;