From cbe60d3acd0dafe4256c56fa0147e377ef5e6471 Mon Sep 17 00:00:00 2001
From: Edwin Kofler <edwin@kofler.dev>
Date: Sun, 17 Sep 2023 03:26:08 -0700
Subject: [PATCH] fix(eslint-plugin): [use-component-selector] applies to
 template literals (#1468)

---
 .../docs/rules/use-component-selector.md      | 58 +++++++++++++++++++
 .../src/rules/use-component-selector.ts       |  4 +-
 .../rules/use-component-selector/cases.ts     | 15 +++++
 3 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/packages/eslint-plugin/docs/rules/use-component-selector.md b/packages/eslint-plugin/docs/rules/use-component-selector.md
index 5c6a410b7..423508cbb 100644
--- a/packages/eslint-plugin/docs/rules/use-component-selector.md
+++ b/packages/eslint-plugin/docs/rules/use-component-selector.md
@@ -217,6 +217,64 @@ class Test {}
 class Test {}
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/use-component-selector": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+  selector: "sg-bar-foo"
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/use-component-selector": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+  selector: `sg-bar-foo`
+})
+class Test {}
+```
+
 </details>
 
 <br>
diff --git a/packages/eslint-plugin/src/rules/use-component-selector.ts b/packages/eslint-plugin/src/rules/use-component-selector.ts
index e603d1b7a..bf13b8953 100644
--- a/packages/eslint-plugin/src/rules/use-component-selector.ts
+++ b/packages/eslint-plugin/src/rules/use-component-selector.ts
@@ -27,8 +27,8 @@ export default createESLintRule<Options, MessageIds>({
 
         if (
           selector &&
-          ASTUtils.isStringLiteral(selector) &&
-          selector.value.length
+          ((ASTUtils.isStringLiteral(selector) && selector.value.length) ||
+            ASTUtils.isTemplateLiteral(selector))
         ) {
           return;
         }
diff --git a/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts b/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts
index febf08468..3da0c2389 100644
--- a/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts
+++ b/packages/eslint-plugin/tests/rules/use-component-selector/cases.ts
@@ -4,11 +4,26 @@ import type { MessageIds } from '../../../src/rules/use-component-selector';
 const messageId: MessageIds = 'useComponentSelector';
 
 export const valid = [
+  // It should succeed with single quotes
   `
     @Component({
       selector: 'sg-bar-foo'
     })
     class Test {}
+`,
+  // It should succeed with double quotes
+  `
+  @Component({
+    selector: "sg-bar-foo"
+  })
+  class Test {}
+`,
+  // It should succeed with template literals
+  `
+    @Component({
+      selector: \`sg-bar-foo\`
+    })
+    class Test {}
 `,
 ];