Ajout de composants.

src/app/app-routing.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {PromisesExampleComponent} from "./promises-example/promises-example.component";
 import {HomeComponent} from "./home/home.component";
+import {ObservablesExampleComponent} from "./observables-example/observables-example.component";
+import {StateManagementExampleComponent} from "./state-management-example/state-management-example.component";
 
 const routes: Routes = [
   {
@@ -12,6 +14,14 @@ const routes: Routes = [
     path: 'promises',
     component: PromisesExampleComponent
   },
+  {
+    path: 'observables',
+    component: ObservablesExampleComponent
+  },
+  {
+    path: 'state-management',
+    component: StateManagementExampleComponent
+  },
   {
     path: '**',
     redirectTo: ''

src/app/app.module.ts

@@ -10,6 +10,8 @@ import {HomeComponent} from './home/home.component';
 import {MatButtonModule} from "@angular/material/button";
 import { BackToHomeComponent } from './back-to-home/back-to-home.component';
 import {MatIconModule} from "@angular/material/icon";
+import { ObservablesExampleComponent } from './observables-example/observables-example.component';
+import { StateManagementExampleComponent } from './state-management-example/state-management-example.component';
 
 @NgModule({
     declarations: [
@@ -17,7 +19,9 @@ import {MatIconModule} from "@angular/material/icon";
         PromisesExampleComponent,
         HeaderComponent,
         HomeComponent,
-        BackToHomeComponent
+        BackToHomeComponent,
+        ObservablesExampleComponent,
+        StateManagementExampleComponent
     ],
     imports: [
         BrowserModule,

src/app/home/home.component.spec.ts

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

src/app/home/home.component.ts

@@ -16,9 +16,9 @@ const LINKS: Link[] = [{
   icon: '👁️',
   href: '/observables'
 }, {
-  label: 'Les state-managements',
+  label: 'Le state-management',
   icon: '🎛️',
-  href: '/state-managements'
+  href: '/state-management'
 }]
 
 @Component({

src/app/observables-example/observables-example.component.html

@@ -0,0 +1 @@
+<p>observables-example works!</p>

src/app/observables-example/observables-example.component.spec.ts

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

src/app/observables-example/observables-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-observables-example',
+  templateUrl: './observables-example.component.html',
+  styleUrls: ['./observables-example.component.scss']
+})
+export class ObservablesExampleComponent {
+
+}

src/app/state-management-example/state-management-example.component.html

@@ -0,0 +1 @@
+<p>state-management-example works!</p>

src/app/state-management-example/state-management-example.component.spec.ts

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

src/app/state-management-example/state-management-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-state-management-example',
+  templateUrl: './state-management-example.component.html',
+  styleUrls: ['./state-management-example.component.scss']
+})
+export class StateManagementExampleComponent {
+
+}