DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Displaying data in our templates]]|[[Using properties]] ->|

Angular à une notation spéciale d'attributs pour gérer les événements, les parenthèses : (<event>)="<méthode du Component>()"

<code>
//template
<h1>{{objet_actuel}}</h1>
  <ul>
    <li (click)="ma_methode($event)" *ngFor="#item of objets"><p>{{item.nom}}</p></li>
  </ul>
</code>

<code>
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;
    }
  }
}
</code>

=== variante ===

<code>
//template
<h1>{{objet_actuel}}</h1>
  <ul>
    <li (click)="ma_methode(item)" *ngFor="#item of objets"><p>{{item.nom}}</p></li>
  </ul>
</code>

<code>
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;
    }
  }
}
</code>

=== ajout d'un input ===

<code>
<input #nouvelObjet>
  <button (click)="ajouterObjet(nouvelObjet.value)">Ajouter<button>
</input>
</code>


<code>
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 ? 
  }
</code>