6-6 Gestion d'événement simple (clic)

Jusqu'à maintenant nous avons vu comment créer un composant, lier une propriété au HTML (template) et utiliser le principe de directives pour contrôler la structure du HTML.

Et si nous voulions ajouter un bouton permettant d'ajouter un nouveau projet à la liste?

Ajouter un bouton

La première étape consiste à ajouter un bouton au composant:

src/app/projets-liste.ts
@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <button>Ajouter un projet</button>

    @if(projets.length > 0){
    <ul>
      @for(projet of projets; track $index) {
      <li>{{ projet }}</li>
      }
    </ul>
    } @else {
      <p>Aucun projet</p>
    }
  `,
  styles: ``
})

Vous devriez maintenant voir un bouton dans la page, sous la liste.

Lier le bouton à une fonction

On veut évidemment qu'il se produise quelque chose lorsque je clique sur le bouton, c'est-à-dire qu'un nouvel élément est ajouté à la liste.

Pour ce faire, on peut lier le bouton à une fonction de la classe.

Créer une fonction ajouterProjet() dans la classe ProjetsListe

src/app/projets-liste.ts
export class ProjetsListe {
    protected projets: string[] = [
        "Discreddit",
        "Organisation du Lan Party",
        "Organisation de la soirée jeu vidéo",
    ]

    protected ajouterProjet(){

    }
}

Lier l'événement click du bouton à la fonction. Pour ce faire, on peut utiliser le nom de l'événement HTML, entre parenthèses.
src/app/projets-liste.ts
```
@Component({
    selector: 'app-projets-liste',
    imports: [],
    template: `
        <button (click)="ajouterProjet()">Ajouter un projet</button>

        @if(projets.length > 0){
        <ul>
            @for(projet of projets; track $index) {
        <li>{{ projet }}</li>
        }
        </ul>
        } @else {
            <p>Aucun projet</p>
        }
    `,
    styles: ``
})
```
info
Heureusement, WebStorm est plutôt efficace avec l'autocomplétion et devrait pouvoir vous aider au fut et à mesure que vous tapez!

info
La majeure partie des événements HTML classiques sont accessibles via l'utilisation des parenthèses. Pour trouver l'événement en question, simplement remplacer la portion "on" qu'on aurait normalement incluse.
Par exemple, si l'événement standard est OnKeyDown, l'événement Angular sera simplement keydown.
Restons avec click pour le cas qui nous occupe :)
Ajouter un élément à la liste lorsque la fonction est exécutée
```
protected ajouterProjet(){
    let numeroProjet = Math.random()*100;
    numeroProjet = Math.floor(numeroProjet);

    this.projets.push(`Projet #${numeroProjet}`);
}
```
info
Dans l'exemple, je ne fais que créer un nom de projet dynamique, contenant un numéro de projet.
- Math.random()*100; génère un nombre entre 0 et 100.
- Math.floor(numeroProjet); obtient une version "sans virgule" du nombre.
- this.projets.push(`Projet #${numeroProjet}`); pousse à la fin du tableau projets un nouveau nom de projet
Essayez dans le navigateur de cliquer sur le bouton et vous devriez voir des projets s'ajouter à la liste dynamiquement!

http://localhost:4200

Imgur

Ajouter un bouton​

Lier le bouton à une fonction​

Ajouter un bouton

Lier le bouton à une fonction