• String interpolation gebruikt de {{ data }} syntaxis om de waarde van een variabele op de HTML-pagina te tonen.
• Je kan interpolatie voor gewone tekst gebruiken of om een HTML-attribuut dynamisch te maken.

Bijvoorbeeld:

Data binding: video les 19 - 25

Opdracht 1

Bestudeer volgende code: https://stackblitz.com/edit/tmk-dobbel.
De code genereert elke seconde een oplopend getal (1, 2, 3, 4, 5 of 6). Voorlopig wordt enkel de afbeelding van getal 1 getoond.

Pas de code aan:

1. Genereer elke seconde een random getal van 1 tem 6.
2. Maak het pad naar de afbeelding dynamisch.
   Getal 1 toont dice_1.svg, getal 2 toont dice_2.svg, enz...
3. Plaats de dobbelsteen nu driemaal op de pagina.

Eindresultaat opdracht 1:

• Property binding gebruikt de [attribute]="data" syntaxis om een HTML-attribuut dynamisch te maken.

Enkele voorbeelden:

Opdracht 2

Bestudeer volgende code: https://stackblitz.com/edit/tmk-preloader.

Pas de code aan:

1. Maak de preloader elke seconde 10% langer en start daarna terug vanaf 0%.

Eindresultaat opdracht 2:

• Event binding gebruikt de (event)="expression" syntaxis.
• Een overzicht van alle beschikbare events vind je op:
  https://developer.mozilla.org/en-US/docs/Web/Events
• De expression is de actie die je bij het event gaat uitvoeren. Korte acties kan je rechtstreeks invullen, maar voor uitgebreide acties schrijf je best een methode in het TS-bestand.
• Optioneel kan je het event (dat alle informatie over de actie bevat) als parameter meegeven aan de methode. Let op de schrijfwijze: als argument schrijf je dan ($event)!

Enkele voorbeelden:

Opdracht 3

Bestudeer volgende code: https://stackblitz.com/edit/tmk-eventbinding.

De variabele showImage bepaalt de afbeelding die je te zien krijgt. Deze waarde is reeds verwerkt in de HTML-code.
Op de twee knoppen staat een click-event dat verwijst naar een methode in het TS-bestand.
Op de afbeelding staan twee events, (dblclick) en (scroll). Omdat je zowel naar boven als naar onder kan scrollen, wordt het event als parameter meegegeven.

Vervolledig de code:

1. incrementImage()
   Verhoog showImage met 1 tot je maxImages bereikt. Daarna wordt showImage terug 1.
2. decrementImage()
   Verlaag showImage met 1. Ook dit getal kan nooit kleiner dat 1 worden.
3. scroll(e)
   Het event wordt in de console getoond. Zoek in de console met welke eigenschap van het event je kan controleren of je naar boven of onder scrolt. Gebruik deze eigenschap om de gepaste actie (decrement of increment) te ondernemen.

Eindresultaat opdracht 3:

• Two-way data binding maakt een rechtstreekse brug tussen de HTML-pagina en de variabelen in het TS-bestand.
• Two-way data binding gebruikt de [(ngModel)]="data" syntaxis op input-elementen.
• Hier verwijst data rechtstreeks naar een variabele in het TS-bestand.
  Telkens je de waarde van een input-element wijzigt, wordt dit doorgegeven aan de variabele en is de wijziging dadelijk zichtbaar in de UI.

• Het bestand color.component.ts bevat één variabele. Extra methodes zijn er niet.
• Op color.component.html zie je voor elke kleur twee input-velden (een slider en een tekstveld). Beide velden worden via ngModel rechtstreeks gekoppeld aan één bepaalde kleur in de variabele color.
  Zodra je één input wijzigt, zie je het tweede inputveld mee veranderen.
• In de jumbotron, onderaan de pagina, wordt de geselecteerde kleur driemaal verwerkt. Eenmaal als property bindig om de achtergrondkleur aan te passen en tweemaal als data binding om de rgb-waarde als tekst te tonen.