diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel b/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel
index 42627e5d8ce498..1ce4b6f5fa3b3a 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel
+++ b/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel
@@ -15,8 +15,8 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/invalid_banana_in_box",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/nullish_coalescing_not_nullable",
-        "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/text_attribute_not_binding",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported",
+        "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/text_attribute_not_binding",
         "@npm//typescript",
     ],
 )
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts
index af16491bef328b..a3a323dd6fbf89 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts
@@ -13,6 +13,8 @@ import {ErrorCode, ExtendedTemplateDiagnosticName} from '../../../../diagnostics
 import {NgTemplateDiagnostic} from '../../../api';
 import {TemplateCheckFactory, TemplateCheckWithVisitor, TemplateContext} from '../../api';
 
+const STYLE_SUFFIXES = ['px', '%', 'em'];
+
 /**
  * A check which detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
  * binding. These suffixes are only available for style bindings.
@@ -25,14 +27,16 @@ class SuffixNotSupportedCheck extends TemplateCheckWithVisitor<ErrorCode.SUFFIX_
       node: TmplAstNode|AST): NgTemplateDiagnostic<ErrorCode.SUFFIX_NOT_SUPPORTED>[] {
     if (!(node instanceof TmplAstBoundAttribute)) return [];
 
-    if (!node.name.startsWith('attr.') ||
-        (!node.name.endsWith('.px') && !node.name.endsWith('.%') && !node.name.endsWith('.em'))) {
+    if (!node.keySpan.toString().startsWith('attr.') ||
+        !STYLE_SUFFIXES.some(suffix => node.name.endsWith(`.${suffix}`))) {
       return [];
     }
 
     const diagnostic = ctx.makeTemplateDiagnostic(
         node.keySpan,
-        'The `.px`, `.%`, `.em`, etc. suffixes are only supported on style bindings.');
+        `The ${
+            STYLE_SUFFIXES.map(suffix => `'.${suffix}'`)
+                .join(', ')} suffixes are only supported on style bindings.`);
     return [diagnostic];
   }
 }
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts
index 4b8db581bb7815..1659a12f2283cf 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts
@@ -12,8 +12,8 @@ import {TemplateCheckFactory} from './api';
 import {factory as invalidBananaInBoxFactory} from './checks/invalid_banana_in_box';
 import {factory as missingControlFlowDirectiveFactory} from './checks/missing_control_flow_directive';
 import {factory as nullishCoalescingNotNullableFactory} from './checks/nullish_coalescing_not_nullable';
-import {factory as textAttributeNotBindingFactory} from './checks/text_attribute_not_binding';
 import {factory as suffixNotSupportedFactory} from './checks/suffix_not_supported';
+import {factory as textAttributeNotBindingFactory} from './checks/text_attribute_not_binding';
 
 export {ExtendedTemplateCheckerImpl} from './src/extended_template_checker';