diff --git a/apps/rxjs/14-race-condition/src/app/app.component.ts b/apps/rxjs/14-race-condition/src/app/app.component.ts
index a7eb77710..5d0829858 100644
--- a/apps/rxjs/14-race-condition/src/app/app.component.ts
+++ b/apps/rxjs/14-race-condition/src/app/app.component.ts
@@ -1,39 +1,28 @@
-import {
- ChangeDetectionStrategy,
- Component,
- inject,
- OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
import { MatDialog } from '@angular/material/dialog';
-import { take } from 'rxjs';
import { TopicModalComponent } from './topic-dialog.component';
-import { TopicService, TopicType } from './topic.service';
+import { TopicService } from './topic.service';
@Component({
standalone: true,
selector: 'app-root',
template: `
-
+ @if (this.topics()) {
+
+ }
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class AppComponent implements OnInit {
+export class AppComponent {
title = 'rxjs-race-condition';
dialog = inject(MatDialog);
- topicService = inject(TopicService);
- topics: TopicType[] = [];
-
- ngOnInit(): void {
- this.topicService
- .fakeGetHttpTopic()
- .pipe(take(1))
- .subscribe((topics) => (this.topics = topics));
- }
+ protected readonly topics = toSignal(inject(TopicService).fakeGetHttpTopic());
openTopicModal() {
this.dialog.open(TopicModalComponent, {
data: {
- topics: this.topics,
+ topics: this.topics(),
},
});
}