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

Le data binding presenté juste avant (partie #2) est une sorte d'ordre 자손. J'ai la source de vérité, 예:title = "bonjour"L'info redescend et le template affichebonjour 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 도착 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 messagebonjour 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 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 반응성:

Je change juste un bout de ma method:

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!';
  }
}

Donc pour récapituler, voici en une image la difference entre la Data et l'Event binding: