Answer: 14

apps/rxjs/14-race-condition/src/app/app.component.ts

@@ -6,8 +6,8 @@ import {
 } 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';
+import { TopicModalComponent, TopicModalData } from './topic-dialog.component';
+import { TopicService } from './topic.service';
 
 @Component({
   selector: 'app-root',
@@ -17,23 +17,15 @@ import { TopicService, TopicType } from './topic.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  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));
-  }
+  ngOnInit(): void {}
 
   openTopicModal() {
-    this.dialog.open(TopicModalComponent, {
-      data: {
-        topics: this.topics,
-      },
+    const topics$ = this.topicService.fakeGetHttpTopic().pipe(take(1));
+    this.dialog.open<TopicModalComponent, TopicModalData>(TopicModalComponent, {
+      data: { topics$ },
     });
   }
 }

apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts

@@ -1,13 +1,20 @@
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { TopicType } from './topic.service';
+
+export type TopicModalData = {
+  topics$: Observable<TopicType[]>;
+};
 
 @Component({
   template: `
     <h1 mat-dialog-title>Show all Topics</h1>
     <div mat-dialog-content>
       <ul>
-        @for (topic of data.topics; track $index) {
+        @for (topic of data.topics$ | async; track $index) {
           <li>
             {{ topic }}
           </li>
@@ -18,9 +25,9 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
       <button mat-button mat-dialog-close>Close</button>
     </div>
   `,
-  imports: [MatDialogModule, MatButtonModule],
+  imports: [AsyncPipe, MatDialogModule, MatButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TopicModalComponent {
-  data = inject(MAT_DIALOG_DATA);
+  data: TopicModalData = inject(MAT_DIALOG_DATA);
 }