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!';
}
}
Donc pour récapituler, voici en une image la difference entre la Data et l'Event binding:
Top comments (0)