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 7 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 en doorgeven aan changeLocation().
• Lijn 17
  Met deze button ga je dezelfde methode uitvoeren als het tekstveld, maar nu geef je de waarde gps mee. Vervolgens wordt het tekstveld city terug leeg gemaakt.
  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$.
  De operator finalize() komt in actie telkens er een nieuwe waarde in de stream komt. Dit is dus de ideale plaats van waaruit 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.

1. Vervang nu zelf de drie woorden die tussen haakjes staan. (Op lijnen 5, 6 en 10.)
2. Toon ook het juiste weericoon (lijn 9).
3. Pas de component aan zodat bij het openen van het pad het weerbericht voor de geografische locatie dadelijk wordt getoond.
4. Is het invulveld leeg, toon dan de weersvoorspelling voor Brussel.
5. Verberg de GPS-button indien de browser geen HTML5 Geolocatie ondersteunt of indien de GPS uit staat.