Date pipe.

De datum staat voorlopig nog als getal op het scherm. Je toont immers de Epoch timestamp.
De epoch time (of unix time) is het aantal seconden verstreken sinds 1 januari 1970. Het is nu aan ons om dit getal te vertalen in een dag.
Omdat JavaScript (en TypeScript) met milliseconden werkt, moet je dit getal eerst nog met 1000 vermenigvuldigen.

Angular heeft een aantal ingebouwde conversiemethodes (pipes genoemd) waarmee je een string of een getal kan omvormen voor je hem op de pagina toont. Pipes werken enkel in de template, niet in de component. We hebben trouwens al een pipe gebruikt. Namelijk de async pipe om dynamisch gegenereerde content op de template te tonen.

Het aantal ingebouwde pipes is vrij beperkt. (Zie Angular API.) De datum kan je wel formatteren.

Date pipe

Datum formatteren met de ingebouwde date pipe.

  • Bestudeer de structuur van de data pipe.
    Voor onze toepassing volstaat het om enkel de naam van de dag te tonen.
  • Open src/app/meteo/forecastday/forecastday.component.html en voeg achter de datum de date pipe met de juiste parameter toe.
    Vergeet niet het getal eerst met 1000 te vermenigvuldigen.
English date


  

Datum vertalen met een custom pipe.

Nu ga je de datum nog door een eigen pipe sturen waarmee je de Engelstalige naam omzet naar een andere taal. Hiervoor ontwerp je een custom pipe.
Misschien ga je later nog enkele pipes aanmaken, dan kan je best alle pipes, net zoals ngx, weer bundelen in één pipes-module.

  • Maak in de map pipes een pipes-module aan en registreer deze in app.module.ts.
  • Maak vervolgens een translateDate-pipe aan. Deze wordt automatisch in de dichtstbijzijnde module (pipes/pipes.module.ts) geregistreerd.
    $ ng g m pipes/pipes --flat -m app
    $ ng g p pipes/translateDate
English date

Vergeet niet dat pipes.module.ts alle pipes moet doorsluizen naar app.module.ts. Daarom moet je alle pipes ook nog in de exports-array plaatsen.

Dadelijk ga je de pipe zelf aanpassen, maar eerst moet je ze toevoegen aan de bestaande code.

Ja kan de pipe met (bijvoorbeeld translateDate:'de') of zonder argument (translateDate) oproepen.

Indien het argument ontbreekt, stel dan de parameter args gelijk aan de default browsertaal. Afhankelijk van de waarde van args, wordt het juiste vertaalwoord opgehaald en teruggestuurd naar de template.