From 21952bbd0f5c70158e1c64f394b3c823161f34a6 Mon Sep 17 00:00:00 2001
From: Andrew Scott <atscott@google.com>
Date: Thu, 1 Dec 2022 12:23:01 -0800
Subject: [PATCH] docs: Add page for 'suffixNotSupported' diagnostic (#48315)

Adds documentation page for `suffixNotSupported` extended diagnostic.

fixes #48290

PR Close #48315
---
 aio/content/extended-diagnostics/NG8106.md | 65 ++++++++++++++++++++++
 aio/content/extended-diagnostics/index.md  |  1 +
 2 files changed, 66 insertions(+)
 create mode 100644 aio/content/extended-diagnostics/NG8106.md

diff --git a/aio/content/extended-diagnostics/NG8106.md b/aio/content/extended-diagnostics/NG8106.md
new file mode 100644
index 0000000000000..86e828f87b461
--- /dev/null
+++ b/aio/content/extended-diagnostics/NG8106.md
@@ -0,0 +1,65 @@
+@name Suffix not supported
+
+@description
+
+This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
+binding. These suffixes are only available for style bindings.
+
+<code-example format="typescript" language="typescript">
+
+import {Component} from '&commat;angular/core';
+
+&commat;Component({
+  // This will result in &commat;div width.px="5">&commat;/div> in the DOM when the likely
+  // intent is &commat;div width="5px">&commat;/div> 
+  template: `<div [attr.width.px]="5"></div>`,
+})
+class MyComponent {
+}
+
+</code-example>
+
+## What should I do instead?
+
+Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings,
+move this to the value assignment of the binding.
+
+<code-example format="typescript" language="typescript">
+
+import {Component} from '&commat;angular/core';
+
+&commat;Component({
+  template: `<div [attr.width]="'5px'"></div>`,
+})
+class MyComponent {
+}
+
+</code-example>
+
+## What if I can't avoid this?
+
+This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+
+<code-example format="json" language="json">
+
+{
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "suffixNotSupported": "suppress"
+      }
+    }
+  }
+}
+
+</code-example>
+
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+
+<!-- links -->
+
+<!-- external links -->
+
+<!-- end links -->
+
+@reviewed 2022-02-28
diff --git a/aio/content/extended-diagnostics/index.md b/aio/content/extended-diagnostics/index.md
index 9a23e9def4d19..25e6bda064268 100644
--- a/aio/content/extended-diagnostics/index.md
+++ b/aio/content/extended-diagnostics/index.md
@@ -10,6 +10,7 @@ Currently, Angular supports the following extended diagnostics:
 
 *   [NG8101 - `invalidBananaInBox`](extended-diagnostics/NG8101)
 *   [NG8102 - `nullishCoalescingNotNullable`](extended-diagnostics/NG8102)
+*   [NG8106 - `suffixNotSupported`](extended-diagnostics/NG8106)
 
 ## Configuration