Du har redan blivit bekant med grundläggande typer av databindning. Nu ska vi se hur dessa tillämpas i praktiken när vi arbetar med TaskComponent.

Uppgiftsstruktur

Vår uppgiftskomponent kommer att visa uppgiftens titel samt två knappar: en för att ändra uppgiftens status (från "Klar" till "Ångra") och en annan för att ta bort uppgiften. Här är den HTML-struktur som kommer att användas:

Stilarna har redan definierats. Du kan granska dem genom att växla till filen style.css.

Komponentimplementering

Vår komponent kommer att arbeta med ett task-objekt, som lagrar information om uppgiften, såsom dess id, title och completed-status. Vi definierar detta objekt i komponentklassen:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Vi kan visa dessa data i komponentens HTML-mall.

Använda komponentdata i mallen

För att visa data från task-objektet refererar vi helt enkelt till dess egenskaper direkt i mallen. Till exempel, för att visa uppgiftens titel:

<div class="task-title">{{ task.title }}</div>

Om uppgiften är slutförd ska knappens text ändras. En ternär operator kan användas för att justera knappens text baserat på värdet av task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Om task.completed är true visas knapptexten "Undo", annars visas "Complete". På detta sätt anpassas knappens text dynamiskt efter det aktuella tillståndet för task.

Lägga till dynamiska klasser med egenskapsbindning

Nu ska vi lägga till möjligheten att ändra utseendet på uppgiften baserat på dess tillstånd. Vi använder egenskapsbindning för att villkorligt tillämpa en CSS-klass:

<div class="task" [class.completed]="task.completed">

Detta innebär: om task.completed är true kommer klassen completed att läggas till på elementet. Annars kommer klassen inte att tillämpas.

Som ett resultat, när uppgiften är slutförd, kommer det visuella utseendet att ändras: texten blir överstruken, färgen blir grå och bakgrunden blir ljusgrå. Alla dessa stilar är definierade i CSS-klassen .completed, som jag har beskrivit ovan.

Händelsebindning till knappar

Nu ska vi binda händelser till knapparna så att lämpliga åtgärder utförs när knapparna klickas på. Vi har två knappar:

• "Slutför" / "Ångra"-knappen — när den klickas på växlar den uppgiftens slutförandestatus;

• "Ta bort"-knappen — när den klickas på tas uppgiften bort.

För att göra detta skapar vi två metoder i TaskComponent:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• Metoden deleteTask() kommer att förbli tom för tillfället eftersom vi ännu inte har någon uppgiftslista att ta bort objekt från;

• Metoden toggleTask() växlar helt enkelt värdet på task.completed. Om uppgiften är markerad som slutförd (true) kommer den att markeras som ofullständig (false), och vice versa.

För att dessa metoder ska fungera när knapparna klickas på behöver vi binda dem till knappens klickhändelser. Vi använder händelsebindning med click-händelsen för att lyssna på klick på knapparna och anropa motsvarande metoder.

I det här exemplet gör händelsebindning det möjligt att koppla användarens handlingar till komponentens metoder. "Slutför" / "Ångra"-knappen anropar metoden toggleTask(), som växlar tillståndet för task.completed. Detta ändrar även knappens text från "Slutför" till "Ångra" beroende på uppgiftens status.

"Ta bort"-knappen anropar metoden deleteTask(), som för närvarande inte är implementerad, eftersom borttagning av uppgifter kommer att läggas till senare.

Nu har vi fullt implementerat mallen för vår enkla uppgiftskomponent. Så här ser komponenten ut:

Komponenten tillhandahåller data, och mallen ger den visuella representationen. Tillsammans skapar de ett interaktivt och användarvänligt gränssnitt för uppgifter, där data visas, utseendet förändras och knapparna anpassas efter uppgiftens tillstånd.