Meteo rootcomponent.

De meteo-component is reeds aangemaakt maar bevat voorlopig enkel wat dummy tekst (meteo works!).
Op deze pagina komt bovenaan een zoekveld en een button waarmee je je locatie kan opvragen.
Onder dit blok komt de weersvoorspelling voor de volgende 10 dagen. Voor dit blok maken we eerst een childcomponent (forecastday) aan.

Template aanpassen.

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

Het dynamisch gedeelte binnen de template is als volgt opgebouwd:

• Lijnen 10 en 11
  Via event binding ga je de waarde van het tekstvel #city uitlezen een doorgeven naar changeLocation(). Vervolgens wordt het tekstveld terug leeg gemaakt.
• Lijn 17
  Met deze button ga je dezelfde methode uitvoeren als het testveld, maar nu geef je de waarde gps mee. In de component gaat deze waarde ervoor zorgen dat je de geografische locatie opvraagt.
• Lijn 31
  Tijdens het ophalen van de data, toon je tijdelijk een preloader. Deze verdwijnt zodra het inlezen is voltooid.
• Lijn 34 en 35
  Toon hier tijdelijk het volledige weeroverzicht. Omdat je de gegevens via een observable ophaalt, ga je met de async pipe subscriben en vervolgens, met de json-pipe, naar JSON omzetten.
  Let op: gebruik ZEKER NIET *ngIf="!loading" !!! *ngIf verwijdert het element volledig uit de DOM. Dus zal de subscribe ook niet plaatsvinden en blijft de preloader altijd staan. Als alternatief gebruik je [hidden]="loading". Hiermee wordt enkel de CSS display eigenschap beïnvloed. Het element verdwijnt dus niet uit de DOM.

Component aanpassen.

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

• Lijn (1)
  Een booleaanse variabele waarmee je de preloader toont of verbergt.
• Lijn (2)
  Maak een lokale variabele currentWeather$ aan. Omdat deze variabele een observable is, eindig je de naam best met een dollarteken. Dit is natuurlijk niet verplicht, maar zo merk je dadelijk het verschil tussen een gewone variabele en een observable.
• Lijn (3)
  Injecteer de ApixuService in de constructor.
• Lijn (4) changeLocation(location)
  Deze methode wordt in de template enkele malen aangesproken. Test eerst of location geen lege string bevat en ga dan pas verder.
  Bevat de locatie het woord gps, dan bepaal je de coördinaten aan de hand van de HTML5 Geolocation API. Deze coördinaten zet je om in een string en stuur je vervolgens naar de methode getWeather(location). Is de locatie afkomstig uit het tekstveld, dan stuur je deze rechtstreeks door naar getWeather(location).
• Lijn (5) getWeather(location)
  Als eerste ga je de preloader tonen. Vervolgens haal je het weerbericht op uit de apixuService en plaats je de gegevens in de lokale variabele currentWeather$. Stel dat er iets mis loopt, dan wil je dit natuurlijk ook onderscheppen. Dit doe je binnen de catch operator van rxjs. De catch operator moet je manueel importeren (lijn 5)!
  Een foutmelding bevat heel wat informatie. Best dat je de foutmelding eerst in de console logt. Dan zal je merken dat error.message de foutomschrijving bevat. Best dat je bij een fout toch iets teruggeeft aan de observable zodat de code niet "hangt". Dit gebeurt op lijn 52.
  De finally() operator (ook manueel importeren) komt in actie zodra alle data volledig binnen is. Dit is dus de plaats waar je de preloader terug verbergt.
  Tip: je kan makkelijk een fout genereren door even de API-key te wijzigen.

Dynamische data op de pagina verwerken.

Bestudeer het JSON-bestand onderaan de pagina en kijk welke velden je nodig hebt. Vergeet niet dat je nog op currentWeather$ moet subscriben via de async pipe!

• Lijn 1: (vervang Meteo (city))
  Let vooral op het vraagteken na async. Hiermee geef je aan dat dit enkel getoond mag worden indien het veld dat volgt ook echt bestaat. Bij het openen van het pad bestaat location.name nog niet en zal location.name ook nog geen waarde bevatten. Het vraagteken lost dit probleem op.

Opdracht.

• Vervang nu zelf de drie woorden die tussen haakjes staan. (Op lijnen 5, 6 en 10.)
• Toon ook het juiste weericoon (lijn 9).
• Pas de component aan zodat bij het openen van het pad het weerbericht voor de geografische locatie dadelijk wordt getoond.
• Indien de browser geen HTML5 Geolocatie ondersteunt, toon dan de weersvoorspelling voor Brussel.