diff --git a/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.spec.ts b/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.spec.ts
index 5ce5ddfdae..1de2bd94b9 100644
--- a/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.spec.ts
+++ b/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -2,24 +2,12 @@ import { DebugElement } from '@angular/core';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { first } from 'rxjs/operators';
 
 import { click } from '../../testing';
 import { Hero } from '../model/hero';
 
 import { DashboardHeroComponent } from './dashboard-hero.component';
 
-describe('DashboardHeroComponent class only', () => {
-  it('raises the selected event when clicked', () => {
-    const comp = new DashboardHeroComponent();
-    const hero: Hero = { id: 42, name: 'Test' };
-    comp.hero = hero;
-
-    comp.selected.pipe(first()).subscribe((selectedHero: Hero) => expect(selectedHero).toBe(hero));
-    comp.click();
-  });
-});
-
 describe('DashboardHeroComponent when tested directly', () => {
   let comp: DashboardHeroComponent;
   let expectedHero: Hero;
@@ -40,7 +28,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
     expectedHero = { id: 42, name: 'Test Name' };
 
-    comp.hero = expectedHero;
+    fixture.componentRef.setInput('hero', expectedHero);
 
     fixture.detectChanges();
   });
@@ -52,7 +40,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   it('should raise selected event when clicked (triggerEventHandler)', () => {
     let selectedHero: Hero | undefined;
-    comp.selected.pipe(first()).subscribe((hero: Hero) => (selectedHero = hero));
+    comp.selectedFromObservable.subscribe((hero: Hero) => (selectedHero = hero));
 
     heroDe.triggerEventHandler('click', null);
     expect(selectedHero).toBe(expectedHero);
@@ -60,7 +48,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   it('should raise selected event when clicked (element.click)', () => {
     let selectedHero: Hero | undefined;
-    comp.selected.pipe(first()).subscribe((hero: Hero) => (selectedHero = hero));
+    comp.selectedToObservable$.subscribe((hero: Hero) => (selectedHero = hero));
 
     heroEl.click();
     expect(selectedHero).toBe(expectedHero);
@@ -68,7 +56,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   it('should raise selected event when clicked (click helper with DebugElement)', () => {
     let selectedHero: Hero | undefined;
-    comp.selected.pipe(first()).subscribe((hero: Hero) => (selectedHero = hero));
+    comp.selected.subscribe((hero: Hero) => (selectedHero = hero));
 
     click(heroDe);
 
@@ -77,7 +65,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   it('should raise selected event when clicked (click helper with native element)', () => {
     let selectedHero: Hero | undefined;
-    comp.selected.pipe(first()).subscribe((hero: Hero) => (selectedHero = hero));
+    comp.selected.subscribe((hero: Hero) => (selectedHero = hero));
 
     click(heroEl);
 
diff --git a/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.ts b/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.ts
index aa3da49886..cc4d28c80a 100644
--- a/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.ts
+++ b/examples/example-app-v17/src/app/dashboard/dashboard-hero.component.ts
@@ -1,21 +1,28 @@
 import { UpperCasePipe } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import { Subject } from 'rxjs';
 
 import { Hero } from '../model/hero';
 
 @Component({
   selector: 'dashboard-hero',
   template: ` <div (click)="click()" class="hero">
-    {{ hero.name | uppercase }}
+    {{ hero().name | uppercase }}
   </div>`,
   styleUrls: ['./dashboard-hero.component.css'],
   standalone: true,
   imports: [UpperCasePipe],
 })
 export class DashboardHeroComponent {
-  @Input() hero!: Hero;
-  @Output() selected = new EventEmitter<Hero>();
+  hero = input.required<Hero>();
+  selected = output<Hero>();
+  selected$ = new Subject<Hero>();
+  selectedFromObservable = outputFromObservable(this.selected$);
+  selectedToObservable$ = outputToObservable(this.selected);
+
   click() {
-    this.selected.emit(this.hero);
+    this.selected$.next(this.hero());
+    this.selected.emit(this.hero());
   }
 }