@Component({
  selector: 'pokemon-app',
  template : `<h1>Liste des pokemons</h1>`  // on a pas forcement bcp de place pour ecrire l'HTML ici
})

@Component({
  selector: 'pokemon-app',
  templateUrl: `./app/app.component.html` // on peux utiliser templateUrl 
			// et un autre fichier dans lequel on ecrit l'html
})

L'interpolation (liaison des données ) :

//dans app.component.ts : 
private title: string = "Liste des pokemons";

//dans app.component.html :
<h1>{{ title }} </h1>

L'interpolation permet d'afficher les propriétés de nos composants dans les templates, via la syntaxe {‌{ }}.

L'interpolation est très pratique pour lier notre template et notre composant. Cependant, il existe d'autres manières de créer des liaisons entre le composant et le template. Nous allons voir les autres types de liaisons possibles.

• La liaison sur une propriété d'élément :

<img [src]="someImageUrl">

• La liaison sur une propriété d'attribut :

<label [attr.for]="someLabelId">...</label>

• La liaison sur une propriété de la classe :

<div [class.special]="isSpecial">Special</div>

//par exemple:
[ngClass]="{disabled: true || false}
//sinon on peux utiliser une variable qu'on modifiera depuis le composant ; 
[ngClass]="{disabled: isDisabled}  //isDisabled : true || false

• La liaison sur une propriété de style :

<button [style.color]="isSpecial ? 'red' : 'green'">

//par exemple : 
[ngStyle]="{color: 'green'}

Gérer les interactions avec les utilisateurs :

<button (click)="onClick()"> Cliquez ici ! </button>

onclick() {
	console.log("tu as cliqué !");
}

Récupérer les valeurs entrées par un utilisateurs :