Angular Binding

Interpolation

le contrôleur

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class AppComponent {
private who: string = "there"
}

la vue

<h2>data binding interpolation</h2>
<label>  {{who}}</label>

Property binding

Si la variable à interpoler dans le template est la valeur d'un attribut d'une balise HTML, vous avez deux possibilité, l'interpollation ou déléguer à Angular la gestion de cet attribut (l'attribut html devient une directive attribut)

le contrôleur

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class AppComponent {
private imgSrc: string = "assets/angular-js.png"
}

la vue

<img [src]="imageSrc" />  au lieu de <img src={{imageSrc}} />

Event binding

• Attribuer une ref à l'élément du DOM (ici #imageRef)
• Passer cette référence à la méthode changeImage() du composant qui est appelée sur l'événement clic

le contrôleur

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class AppComponent {
private imgSrc: string = "assets/angular-js.png";
changeImage(imageRef :any){
imageRef.src= "assets/Angular.png";
}

}

la vue

<img #imageRef [src]="imageSrc" (click)="changeImage(imageRef)" />  au lieu de <img src={{imageSrc}} />

Two-way data binding

le contrôleur

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class AppComponent {
}

la vue

<input [(ngModel)]="value">
<p>{{value}}</p>

Formulaires

Privilégiez les Reactive Forms du Template-Driven
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/#summary