Todo childcomponent.

De details van elk todo-item plaats je best in een childcomponent. Hierdoor blijft de code overzichtelijk en makkelijk onderhoudbaar.

Childcomponent aanmaken.

• Maak in de map todo de todo-item-component aan.
  De component wordt automatisch in de dichtsbijzijnde module (is todo-module) geïmporteerd!

  $ ng g c todo/todo-item

Hoofdcomponent aanpassen.

De childcomponent heeft als selector de naam app-todo-item gekregen. Voeg deze eerst aan de hoofdcomponent toe.

• Voeg onderaan src/app/todo/todo.component.html volgende code toe:

Lijn 3 zorgt ervoor dat elk object uit de array in een eigen childcomponent verschijnt.
Op lijn 4 geef je het volledig object door aan de childcomponent en op lijn 5 de index binnen de array.
Binnen de childcomponent lees je deze paramaters uit via de @Input decorator (@input() item: Todo en @Input index: number).

De site zal nu niet meer functioneren omdat de childcomponent de inputs nog niet kent!

Childcomponent aanpassen.

• Wijzig de code op src/app/todo/todo-item.component.ts.

Op lijn 3 en lijn 4 krijg je de waardes van de hoofdcomponent binnen.

De template zal straks via string interpolation de titel van het item tonen. Voorzie eveneens een tekstveld met daarin dezelfde titel. Het tekstveld is default niet zichtbaar. zodra je dubbelklikt op de titel, zal de titel verdwijnen en wordt het tekstveld getoond. Vandaar dat we een extra eigenschap hideInputField voorzien.
Indien hideInputField = true toon dan enkel de tekst. Is hideInputField = false, toon dan enkel het tekstveld.

Net zoals in de hoofdcomponent moet je de todoService in de constuctor injecteren. (Lijn 7.)

Vergeet ook niet de Input (lijn 3 en 4), Todo (lijn 3 en 4) en de TodoService (lijn 7) bovenaan de pagina te importeren.

Verder hebben we nog drie methodes nodig.

• updateItem()
  Nadat je de titel hebt aangepast, geef je de nieuwe waarde door aan de service. De service weet natuurlijk niet zomaar welk item uit de array je hebt aangepast, vandaar dat je ook de index meegeeft.
  
• toggleIsDone()
  In de template komt een icoontje dat de toestand van het item aangeeft. (zie todo.ts).
  Elke klik op het icoontje inverteert de toestand van isDone. Deze wijziging ga je eveneens aan de service doorgeven zodat deze de aanpassing kan bewaren.
• DeleteItem()
  In de template staat ook een icoontje waarmee je een item kan wissen.
  Door op het icoontje te klikken, ga je het item via de service verwijderen. Ook hier geven we de index binnen de array mee.

Template aanpassen.

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

Het dynamisch gedeelte binnen de template is als volgt opgebouwd:

• Lijn 2:
  Elk item wordt getoond in een bootstrap card. De waarde van isDone bepaalt de achtergrondkeur.
  isDone = true geeft een blauwe achtergrond. isDone = false geeft een rode achtergrond.
• Lijn 7 en lijn 22:
  De waarde van hideInputField bepaalt of div.card-text of div.form-group zichtbaar is.
• Lijn 8:
  Dubbelklik op de titel om het tekstveld zichtbaar te maken zodat je de tekst kan aanpassen.
• Lijn 13:
  De waarde van isDone bepaalt of je een open cirkel of een aangevinkte cirkel toont.
• Lijn 14:
  Inverteer de waarde van isDone.
• Lijn 15:
  Wis het item uit de array.
• Lijn 25:
  De titel verschijnt via two-way data binding in het tekstveld. Alle wijzigingen worden dadelijk doorgegeven aan het ts-bestand.
• Lijn 26 en lijn 27:
  Klik buiten het tekstveld of druk op enter om de wijziging aan de service door te geven.

Opdracht

1. Ook hier kan je het tekstveld leegmaken en verschijnt er een lege titel in de array.
   Pas de code aan zodat bij een leeg tekstveld het todo-item gewist wordt.
2. Voeg aan todo-item.component.scss extra css-eigenschappen toe.
   Bij isDone = true wordt de tekst doorstreept.
   Wijzig de cursor van div.card-text in een pointer.