Meteo childcomponent.

De weersvoorspelling van elke dag, plaats je ook nu best in een childcomponent. Hierdoor blijft de code overzichtelijk en makkelijk onderhoudbaar.

Childcomponent aanmaken.

• Maak in de map meteo de forecastday-component aan.
  (De component wordt automatisch in de meteo-module geïmporteerd.)

  $ ng g c meteo/forecastday -s

Hoofdcomponent aanpassen.

De childcomponent heeft als selector de naam app-forecastday gekregen.

• Voeg net onder de preloader op src/app/meteo/meteo.component.html volgende code toe:

• Lijn 2
  De array currentWeather$.forecast.forecastday bevat de weersvoorspelling voor de volgende 7 dagen.
  Lus met *ngFor over de array en geef de waarde van één dag door aan de childcomponent. Ook hier ontvangen we de data via de observable, vandaar de async pipe, gevolgd door het vraagteken.
• Lijn 3
  Hier geef je het volledig object van één dag door aan de childcomponent.
  Binnen de childcomponent lees je het object uit via de @Input decorator @input() fdc: any.

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

Childcomponent aanpassen.

• Wijzig de code op src/app/meteo/foracastday/forecastday.component.ts.

• Lijn (1)
  Op lijn (1) krijg je de waarde fdc van de hoofdcomponent binnen. Vergeet niet dat je de Input nog moet importeren (zie import bovenaan).

Template aanpassen.

• Wijzig de code op src/app/meteo/forecastday/forecastday.component.html.

• Op lijnen 4, 6, 8, 9 en 11 worden alle gegevens uit de array opgehaald en verwerkt.

Voorlopig zie je de weekdag nog niet. Je ziet enkel een getal. Dit lossen we in het volgende deel op.

Het nut van shareReplay() controleren.