Angular à une notation spéciale d'attributs pour gérer les événements, les parenthèses : (<event>)=“<méthode du Component>()”
//template
<h1>{{objet_actuel}}</h1>
<ul>
<li (click)="ma_methode($event)" *ngFor="#item of objets"><p>{{item.nom}}</p></li>
</ul>
export class AppComponent {
objet_actuel: string;
objets: any;
constructor() {
this.objets = [
{ nom: 'table' },
{ nom: 'chaise' },
{ nom: 'télé' },
],
this.ma_methode(e) {
this.objet_actuel = e.target.innerHTML;
}
}
}
//template
<h1>{{objet_actuel}}</h1>
<ul>
<li (click)="ma_methode(item)" *ngFor="#item of objets"><p>{{item.nom}}</p></li>
</ul>
export class AppComponent {
objet_actuel: string;
objets: any;
constructor() {
this.objets = [
{ nom: 'table' },
{ nom: 'chaise' },
{ nom: 'télé' },
],
this.ma_methode(item) {
this.objet_actuel = item.nom;
}
}
}
<input #nouvelObjet> <button (click)="ajouterObjet(nouvelObjet.value)">Ajouter<button> </input>
export class AppComponent {
(…)
nouvelObjet(nouvelObjet) {
this.objets.push(nouvelObjet); // bon en vrai ici c'est pour un tableau
this.objets.push({nom:nouvelObjet}); // comme ça ça marche ?
}