Repository: prettier/prettier (JavaScript)

Issue:
Unexpected embedded formatting for Angular template
**Prettier 3.2.4**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuc0DOMAE8C2AHAGwEN5MBeTAHRADMIIAjIgJ2oG5KpOABAYQnzQEMABTBOmTAG1chEnAC6STAAMAPAAsAjAD5gwSYcka4BAhEwBfS2oD02nSoA0nSwEpOcAB54IzLGDEaGiYAIJ4ePyCUMKYwJacIE4gEHgwAJboyKAszBAA7gAKLAhoyCBEBPlEAJ5lyQzMRGAA1nAwAMpEOHAAMukxyDSVaHANTa3tHXjNAwDmyDDMAK5jIKM46Ysra954cMzpPbCVACoHUCzpcGVIwwSjyWjzBHAAissQ8EMjawBWaC8HRe70+3zuv2SAEcwXBCnk8LcKmgALQxOAAE0xSRASyI6QI8yiOCI5UqBBxzygc1eoRgS3SDGW8EKB36gwhDzWGhgOAIAHUNOl4GgZmA4B1SsL0gA3YU1cpgYI4mWrACSUCxsA6YEOaVCmo6MBqrx+XOSeDyo35TTw5UtNwOMrgOIGo388KIcxJZseIBmzHd5SYDFMOMtAxg-PSGJgGmQAA4AAzJZhwGHpNOe72kzl+mBEBjR2PxpAAJmSy1Gp0Lt3ufrgOFDGKxGN6RGpyy9cAAYn4SfT5mTmRAQNYgA)
<!-- prettier-ignore -->
```sh
--parser babel
```

**Input:**
<!-- prettier-ignore -->
```jsx
const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

```

**Output:**
<!-- prettier-ignore -->
```jsx
const template = "foobar";

@Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

```

**Expected output:**
<!-- prettier-ignore -->
```jsx
const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}
```

**Why?**

<!-- short explanation of expected output -->

Prettier formats the content of the `template` field in Angular's `@Component` decorator as HTML. However, it now also formats the content of a different field named `template` as HTML. This isn't expected.

I think adding `!node.computed` to https://github.com/prettier/prettier/blob/4b1965ae45dcaeb4208e8c7ee366f54372b69256/src/language-js/embed/utils.js#L47-L51 will fix this.


Hints:
Seems easy to fix.

Patch:
diff --git a/src/language-js/embed/utils.js b/src/language-js/embed/utils.js
--- a/src/language-js/embed/utils.js
+++ b/src/language-js/embed/utils.js
@@ -56,6 +56,7 @@ function isAngularComponentTemplate(path) {
     (node) => node.type === "TemplateLiteral",
     (node, name) =>
       isObjectProperty(node) &&
+      !node.computed &&
       node.key.type === "Identifier" &&
       node.key.name === "template" &&
       name === "value",


Test patch:
diff --git a/tests/format/typescript/angular-component-examples/15969-computed.component.ts b/tests/format/typescript/angular-component-examples/15969-computed.component.ts
new file mode 100644
--- /dev/null
+++ b/tests/format/typescript/angular-component-examples/15969-computed.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: `<h1>{{       hello }}</h1>`,
+})
+export class AppComponent {}
diff --git a/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/typescript/angular-component-examples/__snapshots__/jsfmt.spec.js.snap
@@ -156,6 +156,64 @@ export class AppComponent {}
 ================================================================================
 `;
 
+exports[`15969-computed.component.ts - {"trailingComma":"es5"} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+================================================================================
+`;
+
+exports[`15969-computed.component.ts - {"trailingComma":"none"} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+trailingComma: "none"
+                                                                                | printWidth
+=====================================input======================================
+import { Component } from '@angular/core';
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+  [template]: \`<h1>{{       hello }}</h1>\`
+})
+export class AppComponent {}
+
+================================================================================
+`;
+
 exports[`test.component.ts - {"trailingComma":"es5"} format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]