Composants

Les composants sont les blocs de construction d'une application Angular. Par convention on nommera un composant par sa fonctionnalité suivi de Component (ex. InscriptionComponent).

On déclare le composant à l'aide du décorateur @Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string = 'panier';
}

Anatomie du composant

• selector : le nom à utiliser dans les balises d'une page HTML pour invoquer le composant
• templateUrl : Chemin vers le fichier HTML qui décrit le composant
• styleUrls : Un tableau des chemins vers les différents fichiers de style à utiliser dans le composant.
• class : La classe qui contient toute la logique du composant.

Notez bien l'utilisation de export class, ceci nous permet d'importer le composant dans d'autres composants.

Composants enfant

• On utilisera la sélecteur d'un composant enfant pour l'afficher dans le composant parent.
• L'utilisation de input<> et output<> permettent de communiquer entre le parent et l'enfant.

enfant.component.tsparent.component.htmlparent.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-enfant',
templateUrl: './enfant.component.html',
styleUrls: ['./enfant.component.css']
})

export class EnfantComponent {
    // Pour accepter une entrée du parent
    titre = input<string>();

    // Pour envoyer des données au parent
    notif = output<string>();

    emettre(){
        this.notif.emit('message au parent');
    }
}

...
<td>
    <!-- $event permet de passer toutes les données associées à l'évènement -->
    <app-enfant titre="donnée passée à l'enfant"
                (notif)="reception($event)">
    </app-enfant>
</td>
...

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})

export class ParentComponent {

    reception(message: string): void {
    }
}

Cycle de vie du composant

1. Création
2. Affichage
3. Création et affichage des enfants
4. Détection et prise en charge des modifications aux propriétés du composant
5. Destruction du composant (retirer du DOM)

Des interfaces (comprenant des méthodes) existent pour exécuter des instructions à des endroits précis du cycle de vie :

• OnInit : initialisation du composant; on l'utilise pour charger des données
• OnChanges : utilisé pour gérer les évènements reliés à la modification des propriétés des champs OnDestroy : ménage avant la destruction du composant

import { Component } from '@angular/core';
...
export class Panier {
  ...
  ngOnInit(): void {

  }

  ngOnDestroy(): void{

  }

}

Référence

Documentation Angular