Todo hoofdcomponent.

De todo-component is reeds aangemaakt maar bevat voorlopig enkel wat dummy tekst (todo works!). Op deze pagina ga je de volledige todo-lijst tonen en een formulierveld voorzien waarmee je een nieuw item kan toevoegen. Het is perfect mogelijk om alle logica in deze component te integreren, maar dit is niet erg praktisch. We opteren om een deel van de logica in een childcomponent te plaatsen.

Op de hoofdcomponent plaats je enkel het tekstveld. Voor het volledig overzicht van alle items maak je dadelijk een childcomponent (todo-item) aan.

Component aanpassen.

• Wijzig de code op src/app/todo/todo.component.ts.
  Maak een lokale variabele todoList.
  Injecteer vervolgens de TodoService in de constructor en link de lokale todoList met de todoList uit de service.

Template aanpassen.

• Wijzig de code op src/app/todo/todo.component.html

Het dynamisch gedeelte binnen de template is als volgt opgebouwd:

• Lijn 5
  Geef het tekstveld een lokale referentie (een referentie begint altijd met #). bijvoorbeeld #i
  
• Lijn 6
  Via event binding ga je de waarde van #i uitlezen een doorgeven naar addItem(). Vervolgens wordt het tekstveld terug leeg gemaakt.
• Lijn 9
  Om eenvoudig te controleren welke waardes de todoList bevat, kan je de ganse lijst via string interpolation tonen. De json pipe zet het json-object om naar leesbare tekst.

Opdracht.

1. Als je de cursor in het tekstveld plaatst en dadelijk en enter drukt, zal je een nieuw item zonder titel toevoegen.
   Pas de code van addItem() aan zodat je geen lege titels meer kan toevoegen.