feat: race-condition

Author: marryday

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

@@ -1,39 +1,32 @@
-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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 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',
+  imports: [MatProgressSpinnerModule],
   template: `
-    <button (click)="openTopicModal()">Open Topic</button>
+    @if (topics()) {
+      <button (click)="openModal()">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[] = [];
+  matDialog = inject(MatDialog);
+  topics = toSignal(this.topicService.fakeGetHttpTopic().pipe(take(1)));
 
-  ngOnInit(): void {
-    this.topicService
-      .fakeGetHttpTopic()
-      .pipe(take(1))
-      .subscribe((topics) => (this.topics = topics));
-  }
-
-  openTopicModal() {
-    this.dialog.open(TopicModalComponent, {
+  openModal(): void {
+    this.matDialog.open(TopicModalComponent, {
       data: {
-        topics: this.topics,
+        topics: this.topics(),
       },
     });
   }