fix: race condition by using async pipe

Author: soliyn

apps/rxjs/14-race-condition/project.json

@@ -78,6 +78,15 @@
           "coverage": true
         }
       }
+    },
+    "component-test": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "cypress.config.ts",
+        "testingType": "component",
+        "skipServe:": true,
+        "devServerTarget": "rxjs-race-condition:build"
+      }
     }
   }
 }

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

@@ -1,13 +1,6 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnInit,
-} from '@angular/core';
+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({
   standalone: true,
@@ -17,24 +10,11 @@ import { TopicService, TopicType } from './topic.service';
   `,
   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));
-  }
 
   openTopicModal() {
-    this.dialog.open(TopicModalComponent, {
-      data: {
-        topics: this.topics,
-      },
-    });
+    this.dialog.open(TopicModalComponent);
   }
 }

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

@@ -1,14 +1,16 @@
-import { NgFor } from '@angular/common';
+import { AsyncPipe, NgFor } 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 { MatDialogModule } from '@angular/material/dialog';
+import { take } from 'rxjs';
+import { TopicService } from './topic.service';
 
 @Component({
   template: `
     <h1 mat-dialog-title>Show all Topics</h1>
     <div mat-dialog-content>
       <ul>
-        <li *ngFor="let topic of data.topics">
+        <li *ngFor="let topic of topics$ | async">
           {{ topic }}
         </li>
       </ul>
@@ -17,9 +19,10 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
       <button mat-button mat-dialog-close>Close</button>
     </div>
   `,
-  imports: [MatDialogModule, MatButtonModule, NgFor],
+  imports: [MatDialogModule, MatButtonModule, NgFor, AsyncPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TopicModalComponent {
-  data = inject(MAT_DIALOG_DATA);
+  topicService = inject(TopicService);
+  topics$ = this.topicService.fakeGetHttpTopic().pipe(take(1));
 }