Ajout d'un composant de manipulation de subject pour essayer de compr…

…endre les différences

apps/rxjs/src/app/app.component.ts

@@ -4,17 +4,26 @@ import { Ex2Component } from './ex2/ex2.component';
 import { Ex3Component } from './ex3/ex3.component';
 import { Ex4Component } from './ex4/ex4.component';
 import { Ex5Component } from './ex5/ex5.component';
+import { SubjectComponent } from './subject/subject.component';
 
 @Component({
   standalone: true,
-  imports: [Ex1Component, Ex2Component, Ex3Component, Ex4Component, Ex5Component],
+  imports: [
+    Ex1Component,
+    Ex2Component,
+    Ex3Component,
+    Ex4Component,
+    Ex5Component,
+    SubjectComponent,
+  ],
   selector: 'app-root',
   template: `
-    <app-ex1/>
+    <!-- <app-ex1/> -->
     <!-- <app-ex2/> -->
     <!-- <app-ex3/> -->
     <!-- <app-ex4/> -->
     <!-- <app-ex5/> -->
-  `
+    <app-subject />
+  `,
 })
 export class AppComponent {}

apps/rxjs/src/app/subject/subject.component.html

@@ -0,0 +1,29 @@
+<input type="text" [(ngModel)]="message" />
+<button (click)="sendMessage()" type="submit">Ajout d'un message</button>
+
+<h2>Liste de tous les messages</h2>
+<table>
+  @for (message of messages(); track $index) {
+  <tr>
+    <td>{{ message }}</td>
+  </tr>
+  }
+</table>
+
+<button (click)="reset()">Reset</button>
+
+<div class="card">
+  <h1>Subject</h1>
+  <button (click)="subscribeToSubject()" type="button">S'abonner</button>
+</div>
+
+<div class="card">
+  <h1>ReplaySubject</h1>
+  <button (click)="subscribeToReplaySubject()" type="button">S'abonner</button>
+</div>
+<div class="card">
+  <h1>BehaviorSubject</h1>
+  <button (click)="subscribeToBehaviorSubject()" type="button">
+    S'abonner
+  </button>
+</div>

apps/rxjs/src/app/subject/subject.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubjectComponent } from './subject.component';
+
+describe('SubjectComponent', () => {
+  let component: SubjectComponent;
+  let fixture: ComponentFixture<SubjectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubjectComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/rxjs/src/app/subject/subject.component.ts

@@ -0,0 +1,54 @@
+import { Component, model, signal } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Subject, ReplaySubject, BehaviorSubject, takeUntil } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-subject',
+  standalone: true,
+  imports: [FormsModule, AsyncPipe],
+  templateUrl: './subject.component.html',
+})
+export class SubjectComponent {
+  subject = new Subject<string>();
+  replaySubject = new ReplaySubject<string>();
+  behaviorSubject = new BehaviorSubject<string>('');
+
+  resetSubject = new Subject<void>();
+
+  message = model('');
+  messages = signal<string[]>([]);
+
+  sendMessage(): void {
+    this.subject.next(this.message());
+    this.replaySubject.next(this.message());
+    this.behaviorSubject.next(this.message());
+    this.messages.update((messages) => [...messages, this.message()]);
+    this.message.set('');
+  }
+
+  reset(): void {
+    this.messages.set([]);
+    this.resetSubject.next();
+    this.resetSubject.complete();
+    this.resetSubject = new Subject<void>();
+  }
+
+  subscribeToSubject(): void {
+    this.subject
+      .pipe(takeUntil(this.resetSubject))
+      .subscribe((message) => console.log('Subject:', message));
+  }
+
+  subscribeToReplaySubject(): void {
+    this.replaySubject
+      .pipe(takeUntil(this.resetSubject))
+      .subscribe((message) => console.log('ReplaySubject:', message));
+  }
+
+  subscribeToBehaviorSubject(): void {
+    this.behaviorSubject
+      .pipe(takeUntil(this.resetSubject))
+      .subscribe((message) => console.log('BehaviorSubject:', message));
+  }
+}