feat: race-condition

Author: marryday

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

@@ -1,40 +1,28 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
-import { take } from 'rxjs';
+import { Subject, 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: `
-    <button (click)="openTopicModal()">Open Topic</button>
+    <button (click)="openModal$.next()">Open Topic</button>
   `,
   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, {
+  topics = toSignal(this.topicService.fakeGetHttpTopic().pipe(take(1)));
+  openModal$ = new Subject<void>();
+  dialog = this.openModal$.pipe(takeUntilDestroyed()).subscribe(() => {
+    inject(MatDialog).open(TopicModalComponent, {
       data: {
-        topics: this.topics,
+        topics: this.topics(),
       },
     });
-  }
+  });
 }