diff --git a/angular-cli/default-ts/after-storybook/src/stories/header.component.ts b/angular-cli/default-ts/after-storybook/src/stories/header.component.ts
index 4d3a4fdc53..f1c7afc384 100644
--- a/angular-cli/default-ts/after-storybook/src/stories/header.component.ts
+++ b/angular-cli/default-ts/after-storybook/src/stories/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ButtonComponent } from './button.component';
@@ -27,13 +27,13 @@ import type { User } from './user';
       <h1>Acme</h1>
     </div>
     <div>
-      <div *ngIf="user">
+      <div *ngIf="user()">
         <span class="welcome">
-          Welcome, <b>{{ user.name }}</b
+          Welcome, <b>{{ user().name }}</b
           >!
         </span>
         <storybook-button
-          *ngIf="user"
+          *ngIf="user()"
           size="small"
           (onClick)="onLogout.emit($event)"
           label="Log out"
@@ -41,14 +41,14 @@ import type { User } from './user';
       </div>
       <div *ngIf="!user">
         <storybook-button
-          *ngIf="!user"
+          *ngIf="!user()"
           size="small"
           class="margin-left"
           (onClick)="onLogin.emit($event)"
           label="Log in"
         ></storybook-button>
         <storybook-button
-          *ngIf="!user"
+          *ngIf="!user()"
           size="small"
           [primary]="true"
           class="margin-left"
@@ -62,15 +62,11 @@ import type { User } from './user';
   styleUrls: ['./header.css'],
 })
 export class HeaderComponent {
-  @Input()
-  user: User | null = null;
+  user = input<User | null>(null);
 
-  @Output()
-  onLogin = new EventEmitter<Event>();
+  onLogin = output<Event>();
 
-  @Output()
-  onLogout = new EventEmitter<Event>();
+  onLogout = output<Event>();
 
-  @Output()
-  onCreateAccount = new EventEmitter<Event>();
+  onCreateAccount = output<Event>();
 }
diff --git a/angular-cli/default-ts/after-storybook/src/stories/header.stories.ts b/angular-cli/default-ts/after-storybook/src/stories/header.stories.ts
index 8a9f73b151..ea23cc54b9 100644
--- a/angular-cli/default-ts/after-storybook/src/stories/header.stories.ts
+++ b/angular-cli/default-ts/after-storybook/src/stories/header.stories.ts
@@ -17,6 +17,16 @@ const meta: Meta<HeaderComponent> = {
     onLogout: fn(),
     onCreateAccount: fn(),
   },
+  argTypes: {
+    user: {
+      type: {
+        name: 'object',
+        value: {
+          name: { name: 'string' },
+        },
+      },
+    },
+  },
 };
 
 export default meta;
diff --git a/angular-cli/prerelease/after-storybook/src/stories/header.component.ts b/angular-cli/prerelease/after-storybook/src/stories/header.component.ts
index 4d3a4fdc53..fe6cb06688 100644
--- a/angular-cli/prerelease/after-storybook/src/stories/header.component.ts
+++ b/angular-cli/prerelease/after-storybook/src/stories/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ButtonComponent } from './button.component';
@@ -27,28 +27,28 @@ import type { User } from './user';
       <h1>Acme</h1>
     </div>
     <div>
-      <div *ngIf="user">
+      <div *ngIf="user()">
         <span class="welcome">
-          Welcome, <b>{{ user.name }}</b
+          Welcome, <b>{{ user().name }}</b
           >!
         </span>
         <storybook-button
-          *ngIf="user"
+          *ngIf="user()"
           size="small"
           (onClick)="onLogout.emit($event)"
           label="Log out"
         ></storybook-button>
       </div>
-      <div *ngIf="!user">
+      <div *ngIf="!user()">
         <storybook-button
-          *ngIf="!user"
+          *ngIf="!user()"
           size="small"
           class="margin-left"
           (onClick)="onLogin.emit($event)"
           label="Log in"
         ></storybook-button>
         <storybook-button
-          *ngIf="!user"
+          *ngIf="!user()"
           size="small"
           [primary]="true"
           class="margin-left"
@@ -62,15 +62,11 @@ import type { User } from './user';
   styleUrls: ['./header.css'],
 })
 export class HeaderComponent {
-  @Input()
-  user: User | null = null;
+  user = input<User | null>(null);
 
-  @Output()
-  onLogin = new EventEmitter<Event>();
+  onLogin = output<Event>();
 
-  @Output()
-  onLogout = new EventEmitter<Event>();
+  onLogout = output<Event>();
 
-  @Output()
-  onCreateAccount = new EventEmitter<Event>();
+  onCreateAccount = output<Event>();
 }
diff --git a/angular-cli/prerelease/after-storybook/src/stories/header.stories.ts b/angular-cli/prerelease/after-storybook/src/stories/header.stories.ts
index 8a9f73b151..ea23cc54b9 100644
--- a/angular-cli/prerelease/after-storybook/src/stories/header.stories.ts
+++ b/angular-cli/prerelease/after-storybook/src/stories/header.stories.ts
@@ -17,6 +17,16 @@ const meta: Meta<HeaderComponent> = {
     onLogout: fn(),
     onCreateAccount: fn(),
   },
+  argTypes: {
+    user: {
+      type: {
+        name: 'object',
+        value: {
+          name: { name: 'string' },
+        },
+      },
+    },
+  },
 };
 
 export default meta;