diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 57949fbe2..d5476f42d 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -40,10 +40,9 @@
         }
         <div
           class="mb-0 value"
-          [class]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
+          [class.font-weight-bold]="size === 'large'"
+          [class.h2]="size === 'large'"
+          [class.h4]="size === 'medium'"
         >
           @if (value === null) {
             <span class="text-monospace text-muted">*****</span>
@@ -60,10 +59,9 @@
       @if (isString) {
         <div
           class="mb-0 text-truncate value"
-          [class]="{
-            'font-weight-bold h2': size === 'large',
-            h4: size === 'medium'
-          }"
+          [class.font-weight-bold]="size === 'large'"
+          [class.h2]="size === 'large'"
+          [class.h4]="size === 'medium'"
         >
           {{ formattedValue }}
         </div>