In dit stadium weet onze applicatie al hoe een lijst met taken weer te geven en een bericht te tonen wanneer er geen zijn. Gebruikers hebben echter nog steeds geen manier om nieuwe taken toe te voegen.

We zullen de mogelijkheid toevoegen om een nieuwe taak aan te maken met behulp van een handige knop en een modaal formulier.

We zullen het volgende implementeren:

• Een stijlvolle Add-knop;

• Een modaal venster met een invoerveld voor de titel van de taak;

• De logica voor het toevoegen van een taak aan de lijst in de TaskService;

• Automatische generatie van een unieke identificatiecode.

Aan de slag

Het eerste wat we moeten doen, is onze TaskService uitbreiden zodat deze nieuwe taken kan aanmaken en opslaan. De service moet niet alleen taken opslaan, maar ook alle bedrijfslogica met betrekking tot deze taken afhandelen.

We zullen een addTask-methode in de service aanmaken. De generatie van een unieke ID, het aanmaken van het taakobject en het opslaan ervan in de lijst zullen allemaal binnen de service plaatsvinden. De methode ontvangt alleen een title, die wordt doorgegeven vanuit de TaskListComponent.

De methode addTask() neemt alleen de taaknaam en maakt het Task-object intern aan. Eerst wordt de maximale ID onder de bestaande taken opgezocht, waarna er 1 bij wordt opgeteld om een unieke identificatie te genereren. De nieuwe taak wordt altijd als onvoltooid ingesteld (completed: false) en direct toegevoegd aan de tasks array.

Deze aanpak verwijdert overbodige logica uit de component en maakt de service zowel zelfvoorzienend als herbruikbaar.

Bijwerken van de TaskListComponent

Nu alle logica voor het aanmaken van een nieuwe taak is verplaatst naar de service, is de component alleen verantwoordelijk voor het ontvangen van gebruikersinvoer, het doorgeven van de taaknaam aan de service en het verversen van de lokale takenlijst. Deze aanpak vereenvoudigt de component en centraliseert de bedrijfslogica in de TaskService.

Binnen de component voegen we twee variabelen toe:

• showAddTask — een vlag die de zichtbaarheid van het modale venster voor het toevoegen van een taak regelt;

• newTaskTitle — een string om de taaknaam van de gebruiker op te slaan.

We implementeren ook de methode addTask(), die:

1. Controleert of de invoerstring niet leeg is;

2. De taaknaam doorgeeft aan de methode addTask(title: string) van de service;

3. De lokale takenlijst ververst;

4. Het invoerveld wist en het modale venster sluit.

De methode addTask() is nu zo eenvoudig mogelijk: deze behandelt alleen de gebruikersinteractie en draagt alle bedrijfslogica over aan de service. Dit maakt de code eenvoudiger te onderhouden en te testen.

Zorg er ook voor dat FormsModule is geïmporteerd in je module, aangezien dit noodzakelijk is voor tweerichtingsdatabinding met newTaskTitle.

Toevoegen-knop en Modaal Venster

Laten we nu het UI-gedeelte toevoegen: de Toevoegen-knop en de HTML-markup voor het modale venster dat het invoerveld en de knoppen bevat.

Wanneer de gebruiker op de knop Add klikt, wordt de variabele showAddTask true en verschijnt het modale venster. Het invoerveld is gekoppeld aan de variabele newTaskTitle via [(ngModel)], en de knopacties slaan de taak op of sluiten het modale venster zonder wijzigingen.

Gebruikers kunnen eenvoudig taken toevoegen via een modaal formulier. De nieuwe taak verschijnt direct in de lijst zonder dat de pagina hoeft te worden vernieuwd.

We hebben nu interactiviteit geïmplementeerd die onze applicatie volledig functioneel en gebruiksvriendelijk maakt voor dagelijks gebruik.