Tutoriel sur une introduction au framework web Angular

  index.html                      // la seule page qui sera chargée par le navigateur
    -------------------------
      <app-root></app-root>           // dans cette balise sera projeté le projet Angular compilé en JavaScript (1) 
      ...                             // en quelque sorte, c'est : app.module qui est le module de démarrage, 
                                      // celui qui va contenir tous les autres composants web
      ...
      ...
      ...
      <script src="main.js">...       (1) contient tout le projet Angular compilé en JavaScript
    -------------------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [               // *1
    AppComponent,                    
  ],
  imports: [                    // *2
    BrowserModule,                              // BrowserModule :    le composant racine s'exécutera dans un navigateur
  ],
  exports: [                    // *3

  ],
  providers: [                  // *4

  ],                
  bootstrap: [AppComponent]     // **5          // à indiquer uniquement dans le module racine : app.module.ts
})
export class AppModule { }

en général, voici les tâches que l'on peut faire dans un module:

*1      déclarer tous les composants que l'on a besoin d'utiliser       
*2      importer d'autres modules provenant de son propre projet ou provenant de sources externes comme celui d'un package npm (dossier /node_modules du projet)  
        ici on importe le package BrowserModule, car Angular va s'exécuter dans un navigateur  
*3      indiquer ici les composants web qui doivent être accessibles lors d'un import de ce module         
*4      c'est ici qu'on déclare nos services pour qu'ils soient disponibles dans nos composants 
**5     uniquement présent dans le module racine.
          - Dans 'bootstrap', on doit indiquer quel composant est le point d'entrée 
          - rappel:  app.component.ts est le 1er composant projeté dans la balise : <app-root></app-root> du fichier: index.html

app.module.ts (contexte de la fonctionnalité de démarrage)
...........................................................................
|       <app-root></app-root>             <-----  (app.component.html)            
|       _______________________________________________________________        
|                                                                                 
|           functionality1.module.ts    (contexte de la fonctionnalité 1)
|           ...............................................................
|           |   <app-x></app-x>                                           |
|           |   ___________________________                               |
|           |      ...                       <-----  (x.component.html)
|           |   ___________________________
|           |                                                                  
|           |   <app-y></app-y>               
|           |   ___________________________
|           |       ...                       <-----  (y.component.html)   |
|           |   ___________________________                                |                 
|           ................................................................           
|
|           functionality2.module.ts    (contexte de la fonctionnalité 2)
|                                       (package pdf)
|           ................................................................
|           |    <app-z></app-z>                                            |
|           |    ___________________________                                |
|           |       ... utilise pdf            <-----  (z.component.html)
|           |    ___________________________                                |            
|           ................................................................|        
|       _______________________________________________________________            
..............................................................................

app.module.ts (contexte de la fonctionnalité de démarrage)
              (package pdf)
........................................................................
|       <app-root></app-root>             <-----  (app.component.html)  
|       _______________________________________________________________  
|               <app-x></app-x>                                         
|           |   ___________________________                            
|           |      ...                       <-----  (x.component.html)
|           |   ___________________________
|                                                                             
|               <app-y></app-y>               
|           |   ___________________________
|           |       ...                       <-----  (y.component.html
|           |   ___________________________                                            
|                                                                         
|                <app-z></app-z>                                        
|           |    ___________________________                              
|           |       ... utilise pdf           <-----  (z.component.html)
|           |    ___________________________                                             
|       _______________________________________________________________         
........................................................................

problèmes:
- app.module est le module de démarrage donc il n'a pas pour fonction de gérer des composants
- le package pdf est disponible pour tous les composants alors que seul le composant : app-z en a besoin

    app-module (contexte de démarrage)
    ........................................................
        app-root  (app.component.html)
        ______________________________________

              app-first  (first.component.html)
              __________________________
                ...
              __________________________ 
        _______________________________________
    ........................................................

app.module.ts
    app.component.ts
      first.component.ts                // le nouveau composant (qui est inclus dans app.component)

ng generate component components/first --module=app
// ou la version raccourcie :
ng g c components/first --module=app

...
  declarations: [
      AppComponent,
      FirstComponent,               // le composant 'first' a bien été ajouté, il peut donc être utilisé 
...

<app-first></app-first>             <!-- on indique l'utilisation du composant: first.component -->

import { Injectable } from '@angular/core';
import { ModelX } from '../models/model-x';

@Injectable({
  providedIn: 'root'            // le service sera une instance singleton de niveau : root c'est-à-dire depuis la racine du projet
})                              // et donc la même instance sera fournie aux composants qui la demandent
export class Stored1Service {

  public storedValue1 = 'texte1 from service';                    // on précise : public donc il sera accessible depuis une autre classe
  storedValue2 = 'texte2 from service';                           // les propriétés sont par défaut en : private
  storedModel1: ModelX = {name: 'shrader', firstname: 'Hank'};    // on précise que storedModel1 est du type: ModelX
                                                                  // remarquez qu'on ne renseigne pas : job, car il est optionnel
  constructor() { }

  getStoredValue2(): string {                                         // les fonctions sont par défaut en : public
    return this.storedValue2;
  }

  getStoredModel1(): ModelX {                                         // : ModelX, pour préciser le type de retour : ModelX
    return this.storedModel1;
  }
}

<p>first works!</p>
<hr>
<p>(1) variable1={{variable1}}</p>
<p>(2) array1={{array1}}</p>
<p>(3) objet1={{objet1|json}} | objet1.val1={{objet1.val1}} | objet1.val2={{objet1.val2}}</p>
<p>(4) dataObs={{dataObs$|async}}</p>
<hr>
<p>(5) model1={{model1|json}} avec job: model1.job={{model1.job}}</p>
<p>(6) model2={{model2|json}}</p>
<hr>
<p>(7) value1Service={{value1Service}}</p>
<p>(8) value2Service={{value2Service}}</p>
<p>(9) storedModel1={{storedModel1|json}}</p>
<hr>
<p>(10) dataFn1()={{dataFn1()}}</p>
<hr>
<p>(11) privValue= </p>
<hr>
<p>(12) stored2Service.storedValue1={{stored2Service.storedValue1}}</p>
<p>(12) stored2Service.getStoredModel1()={{stored2Service.getStoredModel1()|json}}</p>
<hr>
<p>(13) data2={{data2|json}}</p>

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable, of, Subscription } from 'rxjs';                           //  ne pas oublier d'importer les classes
import { ModelX } from '../../models/model-x';                                 //  que l'on va utiliser dans le composant
import { Stored1Service } from '../../services/stored1.service';               //

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit, OnDestroy {
  // par défaut, les variables et les fonctions du composant sont déclarées en: public
  //
  // public variable1 = 'hello from variable';
  variable1 = 'hello from variable';                                        // (1) une variable
  array1 = [10, 'Breaking bad', 30];                                        // (2) un tableau
  objet1 = {val1: 'Ehrmantraut', val2: 'Mike'};                             // (3) un objet quelconque
  dataObs$: Observable<string> = of('text from observable A');  // (4) avec un observable, la vue souscrit automatiquement à l'observable pour obtenir les données
                                                                //     par convention on met un $ à la fin de la variable pour indiquer que c'est un observable (facultatif)
                                                                //     sachez également que la vue se désabonne automatiquement quand le composant auquel il appartient n'est plus utilisé
                                                                //     et donc pas besoin de se désabonner dans ngOnDestroy()
  model1: ModelX = {name: 'White', firstname: 'Walter', job: 'chimiste'};   // (5) un objet qui implémente un modèle - (voir /models/model-x.ts)
  model2: ModelX = {name: 'Pinkman', firstname: 'Jesse'};                   // (6) idem - avec une propriété en moins
  value1Service: string = this.stored1Service.storedValue1;                 // (7) depuis la propriété d'un service (qui doit être public)
  value2Service: string = this.stored1Service.getStoredValue2();            // (8) depuis une fonction d'un service
  storedModel1: ModelX;                                                     // (9) initialisé dans : ngOnInit()
  private privValue = 100;                                                  // (11) n'est pas accessible depuis la vue
  subData2: Subscription;                                                     // (13) pour pouvoir se désabonner
  dataObs2$: Observable<ModelX> = of({name: 'Fring', firstname: 'Gustavo'});  // (13) l'observable qui va transmettre un objet de type : Modelx aux souscripteurs
  data2: ModelX;                                                              // (13) en lien avec la vue

                                                            // constructor(.......)
                                                            // automatiquement, l'injection de dépendance (DI) a injecté l'instance de Stored1Service
                                                            // stored1Service contient l'instance qui va être utilisée n'importe où dans le composant avec : this.stored1Service
  constructor(
    private stored1Service: Stored1Service,                                 // on le met en private pour le protéger afin qu'il ne soit accessible qu'ici (dans le contrôleur)
    public stored2Service: Stored1Service                                   // (12) mauvaise pratique : en public, le service: stored2Service est accessible depuis la vue
  ) { }

  ngOnInit(): void {
    this.storedModel1 = this.stored1Service.getStoredModel1();   // (9) à l'initialisation du composant, on appelle la fonction du service pour récupérer la variable : storedModel1

    this.subData2 = this.dataObs2$.subscribe((data: ModelX) => {    // (13) on souscrit à l'observable pour récupérer la valeur. subData2 contient cette souscription
      // ici, on effectue un éventuel traitement...                 //
      this.data2 = data;                                            //      on transmet la valeur reçue à data2 pour la vue
    });
  }

  dataFn1(): string {                                               // (10) une fonction peut aussi être appelée dans la vue (par défaut une fonction est public)
    return 'texte de la fonction';                                  //      il faut donc retourner une valeur
  }

  ngOnDestroy(): void {
    this.subData2.unsubscribe();                                    // (13) il faut toujours se désabonner à un observable que l'on a souscrit manuellement
                                                                    //      sinon il y a un risque de fuite de mémoire
  }
}

constructor(private monService: MonService) {  }

private monService: MonService;

constructor(monService: MonService) { 
  this.monService = monService;
}

ng serve

(1) variable1=hello from variable
(2) array1=10,Breaking bad,30
(3) objet1={ "val1": "Ehrmantraut", "val2": "Mike" } | objet1.val1=Ehrmantraut | objet1.val2=Mike
(4) dataObs=text from observable A
(5) model1={ "name": "White", "firstname": "Walter", "job": "chimiste" } avec job: Model1.job=chimiste
(6) model2={ "name": "Pinkman", "firstname": "Jesse" }
(7) value1Service=texte1 from service
(8) value2Service=texte2 from service
(9) storedModel1={ "name": "shrader", "firstname": "Hank" }
(10) dataFn1()=texte de la fonction
(11) privValue=
(12) stored2Service.storedValue1=texte1 from service
(12) stored2Service.getStoredModel1()={ "name": "shrader", "firstname": "Hank" }
(13) data2={ "name": "Fring", "firstname": "Gustavo" }

ng g m partials --module=app

import { BrowserModule } from '@angular/platform-browser';                    
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PartialsModule } from './partials/partials.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    PartialsModule,                           // c'est OK ! pour utiliser les composants : header.component et footer.component dans la page: app.component.html
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [  ],
})
export class AppModule { }

ng g c partials/header --module=partials
ng g c partials/footer --module=partials

import { NgModule } from '@angular/core';                    
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],             // c'est ok !
  imports: [
    CommonModule
  ]
})
export class PartialsModule { }

ng serve

<app-header></app-header>               <!-- on est dans : app.component du module : app.module -->
<hr>                                    <!-- donc : app.module doit connaitre l'existence de ces composants : app-header et app-footer -->
<h1>Welcome to {{ title }}!</h1>        <!-- pour cela dans : app.module on importe le module : partials.module (qui contient ces composants) -->
<hr>
<app-footer></app-footer>

'app-header' is not a known element
'app-footer' is not a known element

  declarations: [HeaderComponent, FooterComponent],       // OK, on a déclaré les deux composants !
  imports: [
    CommonModule
  ]
  ...

  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    PartialsModule              // OK, on a importé : PartialsModule !
  ],                            //, mais sachez que quand on importe d'un côté, il faut exporter de l'autre
  ...                           // chose que nous n'avons pas faite

...
@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  imports: [
    CommonModule
  ],
  exports: [HeaderComponent, FooterComponent]             // ici, on rend exportables les composants que l'on souhaite
                                                          // afin qu'ils soient importables dans un autre module    
...

header works!
________________________________
Welcome to angular-tuto1!
________________________________
footer works!

ng new angular-two-way1
strict ? NO
routing ? NO
SCSS

ng g c parent --module=app
ng g c child --module=app

<app-parent></app-parent>

<div style="background: lavender;">
  <p>parent works!</p>

  <app-child
    [myMessage1]="'hello toto!'"
    [myVariable1]="variable1"
    [myData1]="data1"
    [myData2]="data2"
    [myDataObs$]="dataObs$"
    [myDataFn]="dataFn()"

    (sendMessage1)="receptionFromChild($event)"
  ></app-child>
  <p>message provenant de l'enfant ---> (7) messageReceptionFromChild=<b>{{ messageReceptionFromChild }}</b></p>

  <hr>
  <h2>test de ngOnChanges</h2>
    <button (click)="clickUpdateMyMessage()">(8) cliquez ici ! modification de la variable: variable1(2) et voir si l'enfant a détecté la modification dans ngOnChanges()  (voir console)</button>
</div>

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  // envoi vers enfant
  variable1 = 'hello from child variable';                                // (2) (8)
  data1 = [10, 'coucou', 30];                                             // (3)
  data2 = {name: 'joe', firstanme: 'black'};                              // (4)
  dataObs$: Observable<string> = of('text from observable A');            // (5)

  // réception de l'enfant
  messageReceptionFromChild: string;                                      // (7)

  dataFn(): string {                                                      // (6)
    return 'text from function';
  }

  constructor() { }

  ngOnInit(): void { }

  receptionFromChild(event: string): void {                               // (7)
    this.messageReceptionFromChild = event;
  }

  clickUpdateMyMessage(): void {                                          // (8)
    this.variable1 = '***** texte de variable1 modifié ******';           // on modifie : variable1 pour déclencher la détection dans le composant enfant
  }
}

<div style="background: gainsboro; margin-left: 24px;">
  <p>child works!</p>

  <h2>réception enfant:</h2>
  <p>(1) myMessage1={{myMessage1}}</p>
  <p>(2) myVariable1={{myVariable1}}</p>
  <p>(3) myData1={{myData1|json}}</p>
  <p>(4) myData2={{myData2|json}}</p>
  <p>(5) myDataObs$={{myDataObs$|async}}</p>
  <p>(6) myDataFn={{myDataFn}}</p>

  <hr>
  <h2>vers le parent:</h2>
  <button (click)="clickSendMessage()">(7) cliquez ici ! envoi d'un message du composant enfant vers le parent</button>
</div>

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit, OnChanges  {
  // @Input()       ->   réception d'une donnée en entrée
  @Input() myMessage1: string;                    // (1)
  @Input() myVariable1: string;                   // (2)
  @Input() myData1: any;                          // (3)
  @Input() myData2: any;                          // (4)
  @Input() myDataFn: string;                      // (5)
  @Input() myDataObs$: Observable<string>;        // (6)

  // @Output()      ->    envoi vers le parent
  @Output() sendMessage1 = new EventEmitter<string>();            // (7) une sortie vers le parent qui écoute

  constructor() { }

  ngOnInit(): void {
  }

  clickSendMessage(): void {                                      // (7)
    this.sendMessage1.emit('text from child');                    // émission de données sur la sortie : @Output() sendMessage1
  }

  ngOnChanges(changes: SimpleChanges): void {                     // (8) ngOnChanges détecte le changement de valeur uniquement avec les variables d'entrées : @Input() .......
    console.log('--------------------------');                    //
    //
    // afficher toutes les variables qui ont été modifiées
    for (const propName in changes) {                             // Angular met dans "changes" toutes les variables qui ont été modifiées
      const change = changes[propName];
      console.log('propriété qui a été modifiée=' + propName);
      console.log('ancienne valeur=' + change.previousValue);
      console.log('nouvelle valeur=' + change.currentValue);
    }
    //
    // disons que je veux savoir si la variable: myVariable1 est modifiée  (les autres variables ne m'intéressent pas)
    for (const propName in changes) {
      if (propName === 'myVariable1') {                           // la variable qui m'intéresse
        console.log('=============================');
        console.log('myVariable1 a été modifié=' + propName);     // forcement propName = 'myVariable1'
        const change = changes[propName];
        console.log('ancienne valeur=' + change.previousValue);
        console.log('nouvelle valeur=' + change.currentValue);
      }
    }
  }
}

ng serve

parent works!

        child works!
        réception enfant:
        (1) myMessage=hello toto!
        (2) myVariable=hello from child variable
        (3) myData1=[ 10, "coucou", 30 ]
        (4) myData2={ "name": "joe", "firstanme": "black" }
        (5) myDataObs$=text from observable A
        (6) myDataFn=text from function
        vers le parent:
        bouton [(7) envoi d'un message du composant enfant vers le parent]

message provenant de l'enfant ---> (7) messageReceptionFromChild=     

test de ngOnChanges
bouton [(8) modification de la variable: variable1(2) et voir si l'enfant a détecté la modification dans ngOnChanges()  (voir console)]

      app.module.ts (contexte d'exécution) - avec une instance du service : stored1.service.ts
      .........................................................
      |     app-root
      |     ___________________________________________________
      |         app-comp1       <--- accès au service : stored1.service.ts
      |         ________________________________
      |             ...
      |         ________________________________  
      |  
      |         app-comp2       <--- accès au service : stored1.service.ts
      |         ________________________________
      |              app-comp3  <--- accès au service : stored1.service.ts
      |               __________________________
      |                     ...
      |               __________________________    
      |         ________________________________                  
      |     ___________________________________________________    
      |
      .........................................................

ng new angular-service-com1
strict ? NO
routing ? NO
SCSS

cd angular-service-com1
ng g c comp1 --module=app
ng g c comp2 --module=app
ng g c comp3 --module=app
ng g s services/stored1
ng g i models/i-user

import { BrowserModule } from '@angular/platform-browser';                    
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';
import { Comp3Component } from './comp3/comp3.component';

@NgModule({
  declarations: [
    AppComponent,
    Comp1Component,           // c'est OK !
    Comp2Component,           // les composants sont bien déclarés ici
    Comp3Component            //
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export interface IUser {
  name: string;
  firstname: string;
  genre: 'madame' | 'monsieur' | 'mademoiselle';
}

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { IUser } from '../models/i-user';

@Injectable({
  providedIn: 'root'        // l'instance du service sera du niveau 'root' c.-à-d. la même instance dans tout le projet
})                          // tous les composants du projet auront accès à la même instance du service
export class Stored1Service {
  private message1 = 'avec une variable du service : texte initial';                                                                // (1) par service
  private messageSubject: BehaviorSubject<string> = new BehaviorSubject<string>('avec un observable du service: texte initial');   // (2) par observable
                                                                                                                                    // BehaviorSubject = initialiser avec une valeur
  private dataSubject: Subject<IUser> = new Subject<IUser>();                                               // (4) par observable
                                                                                                            // Subject = pas d'initialisation de valeur

  constructor() { }

  getMessage1(): string {                                   // (1)
    return this.message1;
  }

  setMessage1(message1: string): void {                     // (1)
    this.message1 = message1;
  }

  getMessageSubject(): BehaviorSubject<string> {            // (2)
    return this.messageSubject;
  }

  getDataSubject(): Subject<IUser> {                        // (4)
    return this.dataSubject;
  }

  emitDataSubject(user: IUser): void {                      // (4)
    this.dataSubject.next(user);
  }
}

ng serve          // c'est l'environnement de dev qui est lancé donc c'est le fichier environment.ts  qui est pris en compte
ng serve --prod   // c'est l'environnement de prod qui est lancé donc c'est le fichier environment.prod.ts  qui est pris en compte
ng build --prod   // compile tout le projet et envoie le résultat dans le dossier: /dist pour le déploiement, donc c'est le fichier environment.prod.ts  qui est pris en compte

ng new angular-api1
strict ? NO
routing ? NO
SCSS

ng g m todo
ng g c /todo/todo-display
ng g i /todo/models/todo
ng g s /todo/services/todo-http

  urlApi: 'https://jsonplaceholder.typicode.com',

  urlApi: 'https://jsonplaceholder.typicode.com',           // normalement en dev, on met une URL d'un serveur de dev ou de test
                                                            //, mais comme je n'en ai pas sous la main et que de toute façon c'est un faux serveur de prod, on utilise le même que celui en prod

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { TodoDisplayComponent } from './todo-display/todo-display.component';

@NgModule({
  declarations: [TodoDisplayComponent],
  imports: [
    CommonModule,
    HttpClientModule,                         // on a besoin du package Http pour effectuer nos requêtes à l'API
  ],
  exports: [TodoDisplayComponent],            // on exporte le composant afin que depuis un autre module on puisse l'importer et l'utiliser
  providers: [  ],
})
export class TodoModule { }

<div *ngFor="let todo of todosWithAny$ | async">
  <p *ngIf="todo.completed">todo.title = {{todo.title}}</p>
</div>

<div><p>titre 1</p></div>
<div><p>titre 2</p></div>
<div><p>titre 3</p></div>

<ng-container *ngFor="let todo of todosWithAny$ | async">
  <p *ngIf="todo.completed">todo.title = {{todo.title}}</p>
</ng-container>

<p>titre 1</p>
<p>titre 2</p>
<p>titre 3</p>

import { Component, OnDestroy, OnInit } from '@angular/core';                    
import { Observable, Subscription,  } from 'rxjs';
import { map } from 'rxjs/operators';
import { TodoHttpService } from '../services/todo-http.service';
import { Todo } from '../models/todo';

@Component({
  selector: 'app-todo-display',
  templateUrl: './todo-display.component.html',
  styleUrls: ['./todo-display.component.scss']
})
export class TodoDisplayComponent implements OnInit, OnDestroy {

  //  un todo par son id
  todo1$: Observable<Todo>;               // A1 : la donnée de l'observable doit être de type: Todo
  todo2: Todo;                            // A2 : la variable doit être du type: Todo
  subTodo2: Subscription;                 // A2 : pour le désabonnement

  // les todos appartenant à un utilisateur
  todosByUser$: Observable<Todo[]>;       // B1 : doit être un observable dont les données doivent être un tableau de type Todo[]
  todosByUser: Todo[];                    // B2 : la variable doit être un tableau de type Todo[]
  subTodosByUser: Subscription;           // B2 : pour le désabonnement

  // tous les todos (de tous les utilisateurs)
  todosWithAny$: Observable<any>;         // C1 : à éviter avec 'any'. Il faut utiliser le typage avec des modèles
  todos$: Observable<Todo[]>;             // D1
  todos: Todo[];                          // D2
  subTodos: Subscription;                 // D2 : pour le désabonnement

  constructor(private todoHttpService: TodoHttpService) { }

  ngOnInit(): void {                      // c'est dans ngOnInit qu'on initialise les données

    // -----------------------------------------------------
    // un todo par son id
    const userId1 = 2;

    // A1 : retourne un observable
    this.todo1$ = this.todoHttpService.getTodo(userId1);    // A1
                                                            // todo1$ est passé à la vue sous forme d'observable
                                                            // c'est la vue qui va souscrire à l'observable via le pipe async
    // A2 : retourne les données brut
    this.subTodo2 = this.todoHttpService.getTodo(userId1).subscribe((todo: Todo) => {   // A2
      this.todo2 = todo;                                                                // todo2 est passé à la vue sous forme de données brutes
    });

    // -------------------------------------------------------------------------
    // les todos appartenant à un utilisateur
    // cas d'utilisation : si l'API envoi qu'une liste de todos et qu'on ne puisse pas récupérer un todo par l'id
    const userId2 = 6;

    // B1 : retourne un observable
    this.todosByUser$ = this.todoHttpService.getTodos().pipe(     // B1
      map((todos: Todo[]) =>                                      // récupère les todos[]
        todos.filter((todo: Todo) => todo.userId === userId2)     // pour chaque élément : todo on filtre avec la condition: todo.userId === 6
      ));                                                         // retourne un observable (contenant les données qui ont été filtrées)

    // B2 : retourne les données brutes
    this.subTodosByUser = this.todoHttpService.getTodos().pipe(   // B2
      map((todos: Todo[]) =>
        todos.filter((todo: Todo) => todo.userId === userId2)
      )
    ).subscribe((todos: Todo[]) => this.todosByUser = todos );    // retourne des données brutes

    // ----------------------------------------------------------------------------
    // tous les todos (de tous les utilisateurs)

    // C1 : retourne un observable
    this.todosWithAny$ = this.todoHttpService.getTodosWithAny();  // C1

    // D1 : retourne un observable
    this.todos$ = this.todoHttpService.getTodos();                // D1

    // D2 : retourne les données brutes
    this.subTodos = this.todoHttpService.getTodos().subscribe((todos: Todo[]) => {  // D2
      this.todos = todos;
    });
  }

  ngOnDestroy(): void {                           // il faut toujours se désabonner aux observables que l'ont a souscrits manuellement
    this.subTodo2.unsubscribe();                  // A2
    this.subTodosByUser.unsubscribe();            // B2
    this.subTodos.unsubscribe();                  // D2
  }
}

constructor(private todoService: TodoService) {                                       
}
// on accède dans les fonctions avec : this.todoService.

private todoService: TodoService

constructor(todoService: TodoService) {
  this.todoService = todoService;
}
// dans les fonctions on accède avec this.todoService.

import { BrowserModule } from '@angular/platform-browser';                    
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TodoModule } from './todo/todo.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TodoModule,                   // importer le module : todo.module.ts
  ],                              // pour pouvoir utiliser le composant (qui a été rendu exportable)
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<app-todo-display></app-todo-display>       <!-- le composant : app-todo-display appartient au module: todo.module.ts -->
                                            <!-- on peut l'utiliser dans app parce qu'on a importé le module en question -->

<p>comp2 works!</p>

<div class="bg-1">prise en compte de la classe css : 'bg-1' du composant : comp2.component.scss</div>

.bg-1 {
  padding: 12px;
  background: green;
  color: white;
}

<p>comp3 works!</p>

<div class="bg-1">prise en compte de la classe css : 'bg-1' du fichier global : styles.scss (car 'bg-1' est absent du composant : comp3.component.scss)</div>

myForm: FormGroup; 
...
...
this.myForm = this.formBuilder.group({                                      
    mycontrol1: ['', Validators.required],                                             
    mycontrol2: [''],

    // pour l'exemple : avec mynested1 on imbrique un formulaire dans un autre (nested1 dans myForm)
    mynested1: this.formBuilder.group({               //  pour cela, on mentionne un noeud 'mynested1' de type FormGroup
        mycontrol11: ['', Validators.required],     
        mycontrol12: [''],             
    })
});
...
onSubmit() {
...

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <input formControlName = "mycontrol1">
    <input formControlName = "mycontrol2">

    <div formGroupName="mynested1">                 <!-- c'est important de mentionner le noeud d'imbrication : 'mynested1' -->
        <input formControlName = "mycontrol11">
        <input formControlName = "mycontrol12">
    </div>

    <button type="submit">Valider</button>
</form>

ng new angular-form1
strict ? NO
routing ? NO
SCSS

ng add @angular/material
- styles ? NO
- animations ? NO

ng g m register --module=app
ng g c register/form-register --module=register
ng g m shared/material-design --module=register

import { NgModule } from '@angular/core';                
import { CommonModule } from '@angular/common';
// Material
import { MatGridListModule } from '@angular/material/grid-list';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,

    MatFormFieldModule,               // on importe uniquement les composants dont on a besoin
    MatGridListModule,                // inutile de tout importer
    NoopAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,

  ],
  exports: [
    MatFormFieldModule,               // ne pas oublier d'exporter pour qu'il puisse être importé dans le module qui le demande
    MatGridListModule,
    NoopAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,

  ]
})
export class MaterialDesignModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RegisterModule } from './register/register.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RegisterModule,                           // on importe le module register pour pouvoir utiliser son composant : form-register.component
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<app-form-register></app-form-register>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormRegisterComponent } from './form-register/form-register.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialDesignModule } from '../shared/material-design/material-design.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [FormRegisterComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,          // IMPORTANT : le module Angular pour les formulaires
                                  // si vous utilisez les formulaires dans plusieurs composants
                                  // vous pouvez importer ce module à un niveau plus haut, par exemple dans : app.module.ts
                                  // car il faut éviter d'importer un module dans plusieurs endroits

    MaterialDesignModule,         // le module material de : /shared/material-design/material-design.module.ts
    NoopAnimationsModule,         // pas d'animation
  ],
  exports: [
    FormRegisterComponent,        // on exporte le composant pour qu'il soit disponible à la racine (qui va l'importer)
  ]
})
export class RegisterModule { }

import { FormGroup } from '@angular/forms';

export function MustMatchValidator(controlName: string, matchingControlName: string) {       // correspond aux champs: password et confirmPassword
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];                            // password
        const matchingControl = formGroup.controls[matchingControlName];            // confirmPassword

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {    // si déjà trouvé une erreur ailleurs dans un autre champ
            return;                                                           // alors pas besoin d'analyser le contrôle des mots de passe
        }

        if (control.value !== matchingControl.value) {                        // si les 2 mots de passe ne correspondent pas
            matchingControl.setErrors({ mustMatch: true });                   // il y a une erreur
        } else {
            matchingControl.setErrors(null);                                  // sinon il n'y a pas d'erreur
        }
    }
}

<p>register-form works!</p>

<!--    version simplifiée (sans le design du material)

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div formGroupName="identity">
    <select formControlName = "title">
      <option value="mr">Mr</option>
      <option value="mme">Mme</option>
    </select>
    <input formControlName = "lastName">
    <input formControlName = "firstName">
  </div>

  <input formControlName = "email">
  <input formControlName = "password">
  <input formControlName = "confirmPassword">

  <button type="reset" (click)="onReset()">Annuler</button>
  <button type="submit">S'enregistrer</button>
</form>

-->

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">           <!-- IMPORTANT: indiquer le formulaire de base qui englobe tous les champs -->

  <div id="container">                      <!-- FLEXBOX (voir le fichier .scss) -->

    <div class="bloc">                      <!-- 1er élément de FLEXBOX (bloc à gauche) -->
      <div formGroupName="identity">        <!-- IMPORTANT : indiquer le noeud d'une imbrication du formulaire -->
              <div>
                <mat-form-field appearance="fill">
                  <mat-label>Civilité</mat-label>
                  <select matNativeControl formControlName = "title" [ngClass]="{ 'is-invalid': submitted && f_identity.title.errors }">
                    <option value="mr">Mr</option>
                    <option value="mme">Mme</option>
                  </select>
                  <mat-error *ngIf="submitted && f_identity.title.errors" class="invalid-feedback">
                    <div *ngIf="f_identity.title.errors.required">La civilité est <strong>obligatoire</strong></div>
                  </mat-error>
                </mat-form-field>
              </div>

              <div>
                <mat-form-field appearance="fill" class="example-full-width">
                  <mat-label>Nom</mat-label>
                  <input matInput placeholder = "Entrez votre nom" formControlName = "lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f_identity.lastName.errors }">
                  <mat-error *ngIf="submitted && f_identity.lastName.errors" class="invalid-feedback">
                    <div *ngIf="f_identity.lastName.errors.required">Le nom est <strong>obligatoire</strong></div>
                  </mat-error>
                </mat-form-field>
              </div>

              <div>
                <mat-form-field appearance="fill" class="example-full-width">
                  <mat-label>Prénom</mat-label>
                  <input matInput placeholder = "Entrez votre prénom" formControlName = "firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f_identity.firstName.errors }">
                  <mat-error *ngIf="submitted && f_identity.firstName.errors" class="invalid-feedback">
                    <div *ngIf="f_identity.firstName.errors.required">Le prénnom est <strong>obligatoire</strong></div>
                  </mat-error>
                </mat-form-field>
              </div>
      </div>
    </div>

    <div class="bloc">                   <!-- 2ème élément de FLEXBOX (bloc à droite) -->
            <div>
              <mat-form-field appearance="fill" class="example-full-width">
                <mat-label>email</mat-label>
                <input matInput placeholder = "Entrez votre email" formControlName = "email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
                <mat-error *ngIf="submitted && f.email.errors" class="invalid-feedback">
                  <div *ngIf="f.email.errors.required">L'email est <strong>obligatoire</strong></div>
                  <div *ngIf="f.email.errors.email">L'email doit être dans un format valide</div>
                </mat-error>
              </mat-form-field>
            </div>

            <div>
              <mat-form-field appearance="fill" class="example-full-width">
                <mat-label>Password</mat-label>
                <input matInput #password placeholder = "mot de passe" formControlName = "password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
                <mat-hint>{{password.value?.length || 0}} caractère(s) (6 minimum)</mat-hint>
                <mat-error *ngIf="submitted && f.password.errors" class="invalid-feedback">
                  <div *ngIf="f.password.errors.required">Le mot de passe est <strong>obligatoire</strong></div>
                  <div *ngIf="f.password.errors.minlength">Le mot de passe doit contenir au moins 6 caractères</div>
                </mat-error>
              </mat-form-field>
            </div>

            <div>
              <mat-form-field appearance="fill" class="example-full-width">
                <mat-label>Confirme Password</mat-label>
                <input matInput placeholder = "confirmation" formControlName = "confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }">
                <mat-error *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
                  <div *ngIf="f.confirmPassword.errors.required">La confirmation est <strong>obligatoire</strong></div>
                  <div *ngIf="f.confirmPassword.errors.mustMatch">Les mots de passe sont différents</div>
                </mat-error>
              </mat-form-field>
            </div>

            <div style="height: 24px;"></div>

            <div>
              <mat-checkbox id="acceptTerms" formControlName = "acceptTerms">Check me!</mat-checkbox>
              <mat-error *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">
                <div *ngIf="f.acceptTerms.errors.required">Vous devez <strong>accepter</strong> les termes</div>
              </mat-error>
            </div>

            <div style="height: 24px;"></div>

            <div>
              <button mat-raised-button color="accent" type="reset" (click)="onReset()">Annuler</button>
              &nbsp;
              <button mat-raised-button color="primary" type="submit">S'enregistrer</button>
            </div>
    </div>

  </div>

</form>