På dette stadiet kan applikasjonen vår allerede vise en liste over oppgaver og vise en melding når det ikke finnes noen. Brukerne har imidlertid fortsatt ikke mulighet til å legge inn nye oppgaver.

Vi skal legge til muligheten for å opprette en ny oppgave ved hjelp av en praktisk knapp og et modal-skjema.

Vi skal implementere:

• En stilfull Add-knapp;

• Et modalvindu med et inndatafelt for oppgavetittel;

• Logikken for å legge til en oppgave i listen i TaskService;

• Automatisk generering av en unik identifikator.

Komme i gang

Det første vi må gjøre er å utvide TaskService slik at den kan opprette og lagre nye oppgaver. Tjenesten skal ikke bare lagre oppgaver, men også håndtere all forretningslogikk knyttet til dem.

Vi skal opprette en addTask-metode i tjenesten. Generering av en unik ID, opprettelse av oppgaveobjektet og lagring i listen vil alt skje inne i tjenesten. Metoden vil kun motta en title, som sendes fra TaskListComponent.

Metoden addTask() tar kun inn oppgavetittelen og oppretter Task-objektet internt. Den finner først det høyeste ID-nummeret blant de eksisterende oppgavene, og legger deretter til 1 for å generere en unik identifikator. Den nye oppgaven settes alltid som ufullført (completed: false) og legges umiddelbart til i tasks-arrayen.

Denne tilnærmingen fjerner unødvendig logikk fra komponenten og gjør tjenesten både selvstendig og gjenbrukbar.

Oppdatering av TaskListComponent

Nå som all logikk for å opprette en ny oppgave er flyttet inn i tjenesten, er komponenten kun ansvarlig for å motta brukerinput, sende oppgavetittelen til tjenesten og oppdatere den lokale oppgavelisten. Denne tilnærmingen forenkler komponenten og sentraliserer forretningslogikken i TaskService.

I komponenten vil vi legge til to variabler:

• showAddTask — et flagg som styrer synligheten til modale vinduet for å legge til en oppgave;

• newTaskTitle — en streng som holder oppgavetittelen fra brukeren.

Vi vil også implementere metoden addTask(), som:

1. Sjekker at input-strengen ikke er tom;

2. Sender oppgavetittelen til tjenestens addTask(title: string)-metode;

3. Oppdaterer den lokale oppgavelisten;

4. Tømmer input-feltet og lukker det modale vinduet.

Metoden addTask() er nå så enkel som mulig: den håndterer kun brukerinteraksjon og overlater all forretningslogikk til tjenesten. Dette gjør koden enklere å vedlikeholde og teste.

Sørg også for at FormsModule er importert i modulen din, da dette er nødvendig for toveis databinding med newTaskTitle.

Legg til-knapp og modalt vindu

Nå skal vi legge til UI-delen: Legg til-knappen og HTML-markupen for det modale vinduet som inkluderer inndatafeltet og knappene.

Når brukeren klikker på Add-knappen, settes variabelen showAddTask til true, og modale vinduet vises. Inndatafeltet er bundet til variabelen newTaskTitle via [(ngModel)], og knappene lagrer enten oppgaven eller lukker modalen uten endringer.

Brukere kan enkelt legge til oppgaver gjennom et modalt skjema. Den nye oppgaven vises umiddelbart i listen uten at siden må oppdateres.

Vi har nå implementert interaktivitet som gjør applikasjonen vår fullverdig og brukervennlig for daglig bruk.