diff --git a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
index df2dc6254..aae78ae58 100644
--- a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
+++ b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
@@ -35,10 +35,10 @@ import { toDisplayText } from '../../../../shared/to-display-text';
     }
   `,
   template: `
-    @if (label() || value()) {
+    @if (displayValue()) {
       <div class="row">
         <span class="row__label">{{ label() }}:</span>
-        <span class="row__value">{{ value() }}</span>
+        <span class="row__value">{{ displayValue() }}</span>
       </div>
     } @else if (loading()) {
       <div class="sr-skeleton" style="height: 11px; width: 100%; margin: 3px 0;"></div>
@@ -49,6 +49,9 @@ import { toDisplayText } from '../../../../shared/to-display-text';
 class DemoValueComponent {
   readonly label = input('');
   readonly value = input<unknown>('');
+  // Coerce through toDisplayText so an unresolved binding object mid-stream
+  // (e.g. a partial `$computed` value) renders as the skeleton, not `[object Object]`.
+  readonly displayValue = computed(() => toDisplayText(this.value()));
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/state-management/angular/src/app/state-management.component.ts b/cockpit/render/state-management/angular/src/app/state-management.component.ts
index 333d513b0..5f3cde4b5 100644
--- a/cockpit/render/state-management/angular/src/app/state-management.component.ts
+++ b/cockpit/render/state-management/angular/src/app/state-management.component.ts
@@ -83,10 +83,10 @@ class DemoHeadingComponent {
     }
   `,
   template: `
-    @if (label() || value()) {
+    @if (displayValue()) {
       <div class="row">
         <span class="row__label">{{ label() }}:</span>
-        <span class="row__value">{{ value() }}</span>
+        <span class="row__value">{{ displayValue() }}</span>
       </div>
     } @else if (loading()) {
       <div class="sr-skeleton" style="height: 11px; width: 100%; margin: 3px 0;"></div>
@@ -97,6 +97,7 @@ class DemoHeadingComponent {
 class DemoLabelComponent {
   readonly label = input('');
   readonly value = input('');
+  readonly displayValue = computed(() => toDisplayText(this.value()));
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});