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 7eb458108..02e687dc1 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
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -45,8 +45,8 @@ class DemoValueComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -62,7 +62,11 @@ class DemoValueComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
index 153248a29..82ee54eb1 100644
--- a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
+++ b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect, signal } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect, signal } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -17,8 +17,8 @@ import { ELEMENT_RENDERING_SPECS } from './specs';
   selector: 'demo-text',
   standalone: true,
   template: `
-    @if (content()) {
-      <p class="text-gray-100 text-sm">{{ content() }}</p>
+    @if (displayContent()) {
+      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
         <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
@@ -28,7 +28,11 @@ import { ELEMENT_RENDERING_SPECS } from './specs';
   `,
 })
 class DemoTextComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
@@ -41,8 +45,8 @@ class DemoTextComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -58,7 +62,11 @@ class DemoTextComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/registry/angular/src/app/registry.component.ts b/cockpit/render/registry/angular/src/app/registry.component.ts
index 1d065f8c7..1d8fe887b 100644
--- a/cockpit/render/registry/angular/src/app/registry.component.ts
+++ b/cockpit/render/registry/angular/src/app/registry.component.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -17,8 +17,8 @@ import { REGISTRY_SPECS } from './specs';
   selector: 'demo-text',
   standalone: true,
   template: `
-    @if (content()) {
-      <p class="text-gray-100 text-sm">{{ content() }}</p>
+    @if (displayContent()) {
+      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
         <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
@@ -28,7 +28,11 @@ import { REGISTRY_SPECS } from './specs';
   `,
 })
 class DemoTextComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
@@ -41,8 +45,8 @@ class DemoTextComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -58,7 +62,11 @@ class DemoTextComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
index 07546f93e..640b69e41 100644
--- a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
+++ b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -17,8 +17,8 @@ import { REPEAT_LOOPS_SPECS } from './specs';
   selector: 'demo-text',
   standalone: true,
   template: `
-    @if (content()) {
-      <p class="text-gray-100 text-sm">{{ content() }}</p>
+    @if (displayContent()) {
+      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
         <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
@@ -28,7 +28,11 @@ import { REPEAT_LOOPS_SPECS } from './specs';
   `,
 })
 class DemoTextComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
@@ -41,8 +45,8 @@ class DemoTextComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -58,7 +62,11 @@ class DemoTextComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
diff --git a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
index ab2095229..10ed745cd 100644
--- a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
+++ b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -17,8 +17,8 @@ import { SPEC_RENDERING_SPECS } from './specs';
   selector: 'demo-text',
   standalone: true,
   template: `
-    @if (content()) {
-      <p class="text-gray-100 text-sm">{{ content() }}</p>
+    @if (displayContent()) {
+      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
         <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
@@ -28,7 +28,11 @@ import { SPEC_RENDERING_SPECS } from './specs';
   `,
 })
 class DemoTextComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
@@ -41,8 +45,8 @@ class DemoTextComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -58,7 +62,11 @@ class DemoTextComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   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 d84dab3e3..76ca48dbd 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
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
-import { Component, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
+import { Component, computed, input, OnDestroy, viewChild, ElementRef, effect } from '@angular/core';
 import {
   RenderSpecComponent,
   RenderElementComponent,
@@ -17,8 +17,8 @@ import { STATE_MANAGEMENT_SPECS } from './specs';
   selector: 'demo-text',
   standalone: true,
   template: `
-    @if (content()) {
-      <p class="text-gray-100 text-sm">{{ content() }}</p>
+    @if (displayContent()) {
+      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
         <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
@@ -28,7 +28,11 @@ import { STATE_MANAGEMENT_SPECS } from './specs';
   `,
 })
 class DemoTextComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});
@@ -41,8 +45,8 @@ class DemoTextComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    @if (content()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ content() }}</h2>
+    @if (displayContent()) {
+      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
       <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
     }
@@ -58,7 +62,11 @@ class DemoTextComponent {
   `,
 })
 class DemoHeadingComponent {
-  readonly content = input('');
+  readonly content = input<unknown>('');
+  readonly displayContent = computed(() => {
+    const c = this.content();
+    return typeof c === 'string' ? c : '';
+  });
   readonly childKeys = input<string[]>([]);
   readonly spec = input<Spec | null>(null);
   readonly bindings = input<Record<string, string>>({});