Découvrir Angular : Le binding de propriété (part.3/7)

On l’a vue précédemment, on à réalisé un binding de donnée dans le template du composant racine AppComponent. Le binding de propriété est un concept phare d’Angular.

Avec Angular, on peut écrire dans les propriétés du DOM via des attributs spéciaux sur les éléments HTML entourés de crochets.

// template (HTML)
<!-- [...] -->
<option [selected]="isSelected" value="angularChallenge">Défi Angular</option>

//component (Controller)
// [...]
export class AppComponent {
   isSelected = true;
}

Ici, l’option sera sélectionnée uniquement si la valeur de isSelected est égale à true et à chaque changement de valeur de la variable isSelected, alors la valeur selected sera mise à jour coté interface !

Le binding fonctionne dans nombreux cas :

// HTML
<h1>Welcome on my website {{ title }} !</h1>
<p>Glade to see you again {{user.name}} :)</p>

Mais assez parlé (ou écrit) !

Passons à un cas concret et codons un peut !

Nous allons créer un objet user dans notre app.component

//fichier : ./src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
   selector:'ns-root',
   templateUrl:'./app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'angularin7days';
   words = ['an Hello World', 'a randomized', 'the most cooled']; // array of choices
   wordsIndex = Math.floor(Math.random() * this.words.length); // random index choice in words array

   user = {
      name :'Tony Stark',
      img :'./assets/iron-man-icon.jpg',
      type :'Marvel Superhero',
      favoriteColor : '#c82f2e'
   }
}

De cet objet user, nous allons pouvoir utiliser ses propriétés dans le template de notre composant avec une simplicité déconcertante !

Pour plus de clareté, j’ai enlevé le superflux du fichier HTML et le voici en entier :

//fichier : ./src/app/app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
   <h1 [style.color]="user.favoriteColor" >
      Welcome {{ user.name }}!
   </h1>
   <img width="300"alt="Angular Logo" src=" {{ user.img }}">
   <p>This is <b>{{ words[wordsIndex]}}</b> input... for starting course called "{{ title }}" !</p>
</div>

On a hyper facilement utilisé le nom, ça c’était easy mais plus fort, on a pu utiliser la propriété src de l’image ! Pour ceux qui utilisaient AngularJS, maintenant, plus besoin d’utiliser la directive ng-src 🙂

On aura aussi remarqué que sur la balise H1, on a pu accéder directement à la propriété color de l’attribut HTML style via la syntaxe [style.color] pour lui attribuer la couleur préférée de l’utilisateur user.favoriteColor qui est dans l’object user .