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.
+
+
+
+import {Component} from '@angular/core';
+
+@Component({
+ // This will result in @div width.px="5">@/div> in the DOM when the likely
+ // intent is @div width="5px">@/div>
+ template: ``,
+})
+class MyComponent {
+}
+
+
+
+## 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.
+
+
+
+import {Component} from '@angular/core';
+
+@Component({
+ template: ``,
+})
+class MyComponent {
+}
+
+
+
+## What if I can't avoid this?
+
+This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+
+
+
+{
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "suffixNotSupported": "suppress"
+ }
+ }
+ }
+}
+
+
+
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+
+
+
+
+
+
+
+@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