feat(doc): move race-condition

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

@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+import { MatDialogModule } from '@angular/material/dialog';
+import { AppComponent } from './app.component';
+
+describe(AppComponent.name, () => {
+  beforeEach(() => {
+    TestBed.overrideComponent(AppComponent, {
+      add: {
+        imports: [MatDialogModule],
+        providers: [],
+      },
+    });
+  });
+
+  it('renders', () => {
+    cy.mount(AppComponent);
+
+    cy.get('button').click();
+    cy.get('ul li').should('have.length', '3');
+  });
+});

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

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} 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,
+  selector: 'app-root',
+  template: ` <button (click)="openTopicModal()">Open Topic</button> `,
+  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));
+  }
+
+  openTopicModal() {
+    this.dialog.open(TopicModalComponent, {
+      data: {
+        topics: this.topics,
+      },
+    });
+  }
+}

apps/rxjs/race-condition/src/app/app.config.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig } from '@angular/core';
+import { importProvidersFrom } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(MatDialogModule)],
+};

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

@@ -0,0 +1,24 @@
+import { NgFor } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  template: ` <h1 mat-dialog-title>Show all Topics</h1>
+    <div mat-dialog-content>
+      <ul>
+        <li *ngFor="let topic of data.topics">
+          {{ topic }}
+        </li>
+      </ul>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button mat-dialog-close>Close</button>
+    </div>`,
+  imports: [MatDialogModule, MatButtonModule, NgFor],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TopicModalComponent {
+  data = inject(MAT_DIALOG_DATA);
+}

apps/rxjs/race-condition/src/app/topic.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { map, timer } from 'rxjs';
+
+export type TopicType = 'Politic' | 'Sport' | 'Culture' | 'Nature';
+
+@Injectable({ providedIn: 'root' })
+export class TopicService {
+  fakeGetHttpTopic = () =>
+    timer(1000).pipe(map((): TopicType[] => ['Politic', 'Culture', 'Nature']));
+}