diff --git a/apps/rxjs/14-race-condition/cypress/tsconfig.json b/apps/rxjs/14-race-condition/cypress/tsconfig.json
index 918d96378..71ddf5111 100644
--- a/apps/rxjs/14-race-condition/cypress/tsconfig.json
+++ b/apps/rxjs/14-race-condition/cypress/tsconfig.json
@@ -2,7 +2,7 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
- "module": "commonjs",
+ "module": "es2015",
"types": ["cypress", "node"],
"sourceMap": false
},
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 a23c31f08..c2ea672f5 100644
--- a/apps/rxjs/14-race-condition/src/app/app.component.ts
+++ b/apps/rxjs/14-race-condition/src/app/app.component.ts
@@ -1,38 +1,29 @@
-import {
- ChangeDetectionStrategy,
- Component,
- inject,
- OnInit,
-} from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
-import { take } from 'rxjs';
import { TopicModalComponent } from './topic-dialog.component';
import { TopicService, TopicType } from './topic.service';
@Component({
selector: 'app-root',
template: `
-
+ @if (topics$ | async; as topics) {
+
+ }
`,
+ imports: [AsyncPipe],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class AppComponent implements OnInit {
+export class AppComponent {
title = 'rxjs-race-condition';
dialog = inject(MatDialog);
topicService = inject(TopicService);
- topics: TopicType[] = [];
+ topics$ = this.topicService.fakeGetHttpTopic();
- ngOnInit(): void {
- this.topicService
- .fakeGetHttpTopic()
- .pipe(take(1))
- .subscribe((topics) => (this.topics = topics));
- }
-
- openTopicModal() {
+ openTopicModal(topics: TopicType[]) {
this.dialog.open(TopicModalComponent, {
data: {
- topics: this.topics,
+ topics,
},
});
}