Débuter avec Angular 14: #3 Réagir à un évenement (comme le clique) avec l'Event binding

#angular #javascript #typescript #frontend

Le data binding presenté juste avant (partie #2) est une sorte d'ordre descendant. J'ai la source de vérité, exemple:
title = "bonjour"
L'info redescend et le template affiche bonjour si on met {{ title }}.

C'est un outils super puissant et qui sera utilisé quasi tout le temps.

Maintenant, disons que j'ai besoin de réagir à une action d'un utilisateur, appelons-le: Jean-Bilal.

Jean-Bilal arrive sur ma belle application et se dit tiens: "L'application est ouf! elle affiche bonjour et tuuut...."

Maintenant, Jean-Bilal à envie d'interagir avec l'application, donc en dessus du message bonjour on va lui mettre un petit bouton:

<h1>{{ title }}</h1>
<button>Clique ici pour voir la magie 🪄</button>

Jean-Bilal, clique mais il ne se passe rien...

Par contre si je remplace le template de app.component.html par ceci:

<button (click)="handle_click()">Clique ici pour voir la magie 🪄</button>

Et que je declare une méthode (function) dans mon composant app.component.ts

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

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

  handle_click() {
    alert('Bonjour!');
  }
}

Petit teasing pour la prochaine partie qui parlera de programmation Reactive:

Je change juste un bout de ma méthode:

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

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

  handle_click() {
    this.title = 'Au revoir!';
  }
}