diff --git a/changelog_unreleased/angular/15969.md b/changelog_unreleased/angular/15969.md
new file mode 100644
index 000000000..668076fb4
--- /dev/null
+++ b/changelog_unreleased/angular/15969.md
@@ -0,0 +1,30 @@
+#### Unexpected embedded formatting for Angular template (#15969 by @JounQin)
+
+Computed template should not be considered as Angular component template
+
+
+```ts
+// Input
+const template = "foobar";
+
+@Component({
+ [template]: `
{{ hello }}
`,
+})
+export class AppComponent {}
+
+// Prettier stable
+const template = "foobar";
+
+@Component({
+ [template]: `{{ hello }}
`,
+})
+export class AppComponent {}
+
+// Prettier main
+const template = "foobar";
+
+@Component({
+ [template]: `{{ hello }}
`,
+})
+export class AppComponent {}
+```
diff --git a/src/language-js/embed/utils.js b/src/language-js/embed/utils.js
index 107fe490b..ca9c41c02 100644
--- 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",
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
index 000000000..72b37c781
--- /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]: `{{ hello }}
`,
+})
+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
index 9a41ce0f2..c81691af2 100644
--- 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]: \`{{ hello }}
\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+ [template]: \`{{ hello }}
\`,
+})
+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]: \`{{ hello }}
\`,
+})
+export class AppComponent {}
+
+=====================================output=====================================
+import { Component } from "@angular/core";
+
+const template = "foobar";
+
+@Component({
+ [template]: \`{{ hello }}
\`
+})
+export class AppComponent {}
+
+================================================================================
+`;
+
exports[`test.component.ts - {"trailingComma":"es5"} format 1`] = `
====================================options=====================================
parsers: ["typescript"]