Les 2: Ionic & Angular
Les 2: Ionic & Angular
Tijdens deze oefensessie bouw je enkele uitbreidingen op de To-Do app die tijdens de theorieles gebouwd is. Je kan deze code vinden op GitFront.
Tijdens deze les oefen je op:
- Een Ionic project aanmaken
- Gebruik van de *ngIf en *ngFor directives
- Property binding
- Event binding
- Lezen van documentatie
Oefening 1: Lay-out
De lijnen onder de list-items komen links niet helemaal tot aan de rand, ga in de documentatie op zoek naar het juiste attribuut om deze lijnen de volledige breedte van de lijst te laten innemen.
Oefening 2: Geen taken
Als de gebruiker nog geen taken aangemaakt heeft wordt de FAB verborgen en worden onderstaande tekst en knop getoond. De knop heeft dezelfde werking als de FAB, als je hierop klikt, wordt dus ook de presentAlert functie opgeroepen. De tekst in onderstaand screenshot is gecentreerd, maak gebruikt van de Ionic CSS Utilities om dit te implementeren. Zodra er een taak toegevoegd wordt, verdwijnen de knop en de tekst en wordt de FAB terug getoond.
Oefening 3: Taken verwijderen
Het kan handig zijn om taken te verwijderen als je ermee klaar bent, alles in de lijst houden wordt snel onoverzichtelijk.
Ga op zoek in de documentatie van <ion-sliding> en zorg ervoor dat elk element in de lijst naar rechts geswipet kan worden om een taak te verwijderen. De knop waarmee een taak verwijderd kan worden moet een rode kleur hebben en moet een gepast icoontje krijgen.
Oefening 4: FAB verbergen
Als we veel taken toevoegen aan onze lijst wordt het snel duidelijk dat de floating action button (FAB) niet altijd even handig is. Het is namelijk onmogelijk om de onderste taak als gereed te markeren. Je kan niet aan het vinkje omdat dit verstop zit onder de knop.
In de <ion-content> component worden scroll events voorzien. Bekijk de documentatie en gebruik deze events om de FAB te laten verdwijnen tijdens het scrollen. Als je stop met scrollen wacht het programma 1.5 seconden en vervolgens verschijnt de FAB opnieuw.
Oefening 5: Filter
Momenteel tonen we alle taken, ook diegene die afgewerkt zijn. Voeg rechtsboven in de header een <ion-select> toe waarmee een filter (alle taken, de afgewerkte taken, de to-do taken) gekozen kan worden.
Je zult merken dat de <ion-select> component er standaard anders uitziet dan in onderstaande video, zoek zelf in de documentatie hoe je het uiterlijk kan aanpassen. Verder zul je ook merken dat de witruimte rechts van de select niet 100% gelijk is aan diegene in de video. Je kan in de documentatie van de CSS utilities gaan kijken om een oplossing te vinden. Je mag zelf geen CSS schrijven.
Zorg dat de mogelijke filter opties gedefinieerd zijn in een enum en dat de opties in de select opgebouwd worden aan de hand van een *ngFor directive. Over een enum kan je niet itereren, ga terug kijken in de oefeningen van les 1 als je niet meer weet hoe je dit probleem kan oplossen.
Koppel via property binding het value attribuut van de select aan de geselecteerde filter. Om te reageren op het change event gebruik je volgende code:
(ionChange) = 'changeFilter($event)'
De parameter $event bevat alle informatie over het getriggerde event, als je het object uitprint vind je welk attribuut de geselecteerde waarde bevat. Dit is hetzelfde attribuut als bij een klassiek event in een HTML/JS applicatie.
Schrijf tenslotte een functie die de geselecteerde filter gebruikt om enkel die taken terug te geven die voldoen aan de filter. Gebruik deze functie om enkel de taken te tonen die voldoen aan de geselecteerde filter.
Oefening 6: Leeg filter resultaat
Als er geen enkele taak te vinden is die voldoet aan de filter wordt onderstaande boodschap getoond. Let op, als er geen enkele taak aangemaakt is, wordt nog steeds de boodschap uit oefening 2 getoond.
