Dev

README.md

@@ -74,3 +74,20 @@ It will show tasks that you can run with Nx.
 - [Join the community](https://nx.dev/community)
 - [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
 - [Follow us on Twitter](https://twitter.com/nxdevtools)
+
+## Set up local server
+- Init Nx in an existing project
+
+```bash
+
+npx nx@latest init
+
+```
+
+- Run server
+
+```bash
+
+npx nx serve <project>
+
+```

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

@@ -7,6 +7,7 @@ import { Ex5Component } from './ex5/ex5.component';
 import { SubjectComponent } from './subject/subject.component';
 
 @Component({
+  selector: 'app-root',
   standalone: true,
   imports: [
     Ex1Component,
@@ -26,4 +27,5 @@ import { SubjectComponent } from './subject/subject.component';
     <app-subject />
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+}

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

@@ -1,17 +1,41 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
+import { Observable, map, range, take } from 'rxjs';
 
 @Component({
   selector: 'app-ex1',
   standalone: true,
   imports: [AsyncPipe],
-  template: ``,
+  template: `
+    <h2> Exercice 1 </h2>
+    <div style="display: flex;">
+      @for (number of numbers; track number) {
+        <p>{{ number}},</p>
+      }
+    </div>
+  `,
 })
-export class Ex1Component {
-  // TODO : Créer un observable qui émet une séquence de nombre de 1 à 10
-  // TODO : Affiche le résultat dans la console et dans le template
-  // TODO : Multiplier chaque valeur de l'observable par 2
-  // TODO : Emettre uniquement les valeurs pairs
+export class Ex1Component implements OnInit {
 
+  // TODO : Créer un observable qui émet une séquence de nombre de 1 à 10
+  private _numbers$ = range(1, 10)
+  numbers: Array<number> = []
+
+
   constructor() {}
+
+  ngOnInit(): void {
+    console.log('---------------- exercice 1 ----------------')
+    this._numbers$
+    // TODO : Emettre uniquement les valeurs pairs
+    // TODO : Multiplier chaque valeur de l'observable par 2
+      .pipe(take(10), map(nb => 2*nb))
+      .subscribe({
+      next: (nb: number) => {
+        // TODO : Affiche le résultat dans la console et dans le template
+        console.log(nb)
+        this.numbers.push(nb)
+      } 
+    })
+  }
 }

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

@@ -1,20 +1,45 @@
-import { Component } from '@angular/core';
-import { Observable, of, throwError } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Observable, combineLatest, concat, filter, map, merge, of, range, throwError } from 'rxjs';
 
 @Component({
   selector: 'app-ex2',
   standalone: true,
-  template: ``
+  template: `
+    <h2> Exercice 2 </h2>
+
+    @for (message of errorMessage; track message) {
+        <p class="error">{{ message}} </p>
+      }
+  `
 })
-export class Ex2Component {
+export class Ex2Component implements OnInit {
   // TODO : Créer deux observables
   // TODO : Le premier observable émet des valeurs paires de 1 à 10
+  private _evenNumbers$ = range(1, 10).pipe(filter(nb => nb % 2 === 0))
   // TODO : Le second observable émet des valeurs impaires de 1 à 10
+  private _oddNumbers$ = range(1, 10).pipe(filter(nb => nb % 2 != 0))
+
   // TODO : Merger les deux observables pour n'en former qu'un seul
+  private _numbers$ = merge(this._evenNumbers$, this._oddNumbers$)
+
   // TODO : Utiliser un opérateur pour afficher les retours de la méthode getFromId()
   // TODO : Notifier l'utilisateur en cas d'erreur
+  errorMessage: string[] = [];
 
   constructor() {}
+
+  ngOnInit(): void {
+    console.log('---------------- exercice 2 ----------------')
+    this._numbers$
+      .subscribe({
+        next: id => {
+          getFromId(id).subscribe({ // !REVIEW use switch map instead
+            next: result => console.log(result),
+            error: error => this.errorMessage.push(`Une erreur est survenue à l'id ${error}.`)
+          })
+        }
+      })
+  }
 }
 
 // - Contraintes : Il est interdit de modifier cette méthode

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

@@ -1,16 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { combineLatest, debounce, interval, map, range, sampleTime, scan, take } from 'rxjs';
 
 @Component({
   selector: 'app-ex3',
   standalone: true,
   imports: [],
-  template: ``
+  template: `
+      <h2> Exercice 3 </h2>
+      <div style="display: flex;">
+        @for (tuple of tuples; track tuple[0]) {
+          <p>{{ tuple }} </p>
+        }
+      </div>
+  `
 })
-export class Ex3Component {
+export class Ex3Component implements OnInit {
   // TODO : Créer deux observables qui emettent des valeurs à interval régulier mais un interval différent
+  private _lettreA$ = interval(1000).pipe(map(_ => 'A'))
+  private _lettreZ = interval(1500).pipe(map(_ => 'Z'))
   // TODO : Combiner les deux observables pour former un qui émet des tuples des valeurs émises par chacun des deux observables
-  // TODO : Afficher uniquement les 10 premières valeurs émises par le nouvel observable
-
-
+  private _combined$ = combineLatest([this._lettreA$, this._lettreZ]).pipe(map(([nb1, nb2]) => [nb1, nb2]))
+  
+  tuples: Array<string []> = []
   constructor() {}
+
+  ngOnInit(): void {
+    console.log('---------------- exercice 3 ----------------')
+    // TODO : Afficher uniquement les 10 premières valeurs émises par le nouvel observable
+    this._combined$.pipe(take(10)).subscribe((tuple: Array<string>) => {
+      console.log(tuple)
+      this.tuples.push(tuple)
+    })
+
+  }
 }

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

@@ -1,16 +1,44 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { filter, interval, map, take } from 'rxjs';
 
 @Component({
   selector: 'app-ex4',
   standalone: true,
   imports: [],
-  template: ''
+  template: `
+    <h2> Exercice 4 </h2>
+    <div style="display: flex;">
+      @for (r of result; track r) {
+        <p>{{ r }} </p>
+      }
+    </div>
+  `
 })
-export class Ex4Component {
+export class Ex4Component implements OnInit {
   // TODO : Utiliser un interval pour émettre des valeurs
-  // TODO : Utiliser un opérateur pour limiter le nombre de valeurs émises à 10
-  // TODO : Utiliser un opérateur pour limiter les valeurs émises en fonction d'une condition
+  _count: number = 0
+  private _values$ = interval(1000).pipe(map(_ => {
+    this._count += 1
+    return this._count
+  }))
+
   // TODO : Utiliser un opérateur pour émettre les 5 dernières valeurs
 
+
+  result: Array<number> = []
+
   constructor() {}
+  ngOnInit(): void {
+    console.log('---------------- exercice 3 ----------------')
+    this._values$
+    .pipe(
+      // TODO : Utiliser un opérateur pour limiter le nombre de valeurs émises à 10
+      take(10),
+      // TODO : Utiliser un opérateur pour limiter les valeurs émises en fonction d'une condition
+      filter(value => value % 2 === 0))
+    .subscribe(value => {
+      console.log(value)
+      this.result.push(value)
+    })
+  }
 }

apps/signals/src/app/app.component.html

@@ -1,2 +1,4 @@
-<app-notification-control></app-notification-control>
-<app-notification-list></app-notification-list>
+<div class="conversation">
+    <app-notification-control></app-notification-control>
+    <app-notification-list></app-notification-list>
+</div>

apps/signals/src/app/notification-item/notification-item.component.html

@@ -1,5 +1,5 @@
 <div [class.read]="notification.read">
-    <p>{{ notification.message }}</p>
+    <p class="message">{{ notification.message }}</p>
     <button (click)="markAsRead()">Mark as Read</button>
     <button (click)="removeNotification()">Remove</button>
 </div>

apps/signals/src/styles.css

@@ -1 +1,38 @@
-/* You can add global styles to this file, and also import other style files */
+body {
+    background-color: #EAECEE;
+    color: #17202A ;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.conversation {
+    padding: 16px;
+    background-color: #ABB2B9 ;
+    border-radius: 8px;
+}
+
+.message {
+    background-color: antiquewhite;
+    padding: 8px;
+    height: 24px;
+    width: 300px;
+    border-radius: 0px 25px 25px 25px;
+}
+
+input {
+    padding: 4px;
+    height: 24px;
+    width: 300px;
+}
+
+button {
+    cursor: pointer;
+    margin: 0 16px;
+    padding: 12px;
+    border: none;
+    font-size: 16px;
+    border-radius: 8px;
+}

nx.json

@@ -1,7 +1,10 @@
 {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/.eslintrc.json",
@@ -17,8 +20,13 @@
   "targetDefaults": {
     "@angular-devkit/build-angular:application": {
       "cache": true,
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ]
     },
     "@nx/eslint:lint": {
       "cache": true,
@@ -31,7 +39,11 @@
     },
     "@nx/jest:jest": {
       "cache": true,
-      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/jest.preset.js"
+      ],
       "options": {
         "passWithNoTests": true
       },
@@ -53,5 +65,7 @@
     "@nx/angular:component": {
       "style": "css"
     }
-  }
-}
+  },
+  "defaultBase": "main",
+  "nxCloudAccessToken": "YzBmZWIxODUtYTg4Ny00ZjhhLTg0MzgtZDIxNzJiMTgxNGU0fHJlYWQtd3JpdGU="
+}