Hoe zijn ze verbonden?

De TaskListComponent beheert een array van taken, waarbij elke taak een object is met de velden id, title en completed. Voor het weergeven van elke taak gebruiken we de TaskComponent.

Daarnaast communiceert de TaskComponent met zijn bovenliggende component over gebruikersacties, zoals wanneer een taak verwijderd moet worden of als voltooid moet worden gemarkeerd. Deze interactie vindt plaats via event-emissie.

Implementatie van de TaskListComponent-logica

Hier maken we een component die verantwoordelijk is voor het beheren van de takenlijst. Hierin definiëren we een array van taken en voegen we twee methoden toe — deleteTask() en toggleStatus() — voor het beheren van taken.

• De lijst met taken (tasks) wordt beheerd binnen de component, waardoor TaskListComponent de centrale controller is;
• De methode deleteTask() filtert de taak op basis van zijn id;
• De methode toggleStatus() zoekt de taak op id en schakelt de status van completed om.

Deze code gebruikt de *ngFor-directive om door de tasks-array te lopen en voor elke taak een TaskComponent te maken. We bekijken in het volgende onderdeel hoe *ngFor precies werkt.

• [task]="task" — geeft de huidige taak door aan de childcomponent zodat deze getoond kan worden;

• (onDelete)="deleteTask($event)" — luistert naar het onDelete-event van de child en roept deleteTask() aan om de taak te verwijderen;

• (onToggle)="toggleStatus($event)" — luistert naar het onToggle-event en roept toggleStatus() aan om de status van de taak te wijzigen.

Decorators: @Input() en @Output()

Nu is het tijd om de TaskComponent te verbinden met de TaskListComponent, en daarvoor gebruiken we de decorators @Input() en @Output().

In Angular zijn de @Input()- en @Output()-decorators essentiële hulpmiddelen voor communicatie tussen componenten. Hiermee kun je data naar een component sturen en events vanuit een component uitsturen. Hier volgt een kort overzicht:

Hier is een voorbeeld van hoe dit werkt in de TaskComponent:

In ons geval is task het object dat vanuit de oudercomponent TaskListComponent wordt doorgegeven aan de TaskComponent.

Wanneer de gebruiker een taak verwijdert of de status wijzigt, zendt de TaskComponent gebeurtenissen uit waarop de oudercomponent luistert.

@Output() en EventEmitter worden gebruikt om de oudercomponent te informeren wanneer er iets gebeurt in het kind. Deze decorateurs stellen het kindcomponent in staat om acties zoals het verwijderen van taken of het wijzigen van de status aan de ouder door te geven.

De methode deleteTask() wordt aangeroepen wanneer de gebruiker een taak wil verwijderen. Deze zendt het id van de taak uit, waardoor de ouder de taak uit zijn lijst kan verwijderen.

De methode toggleTask() schakelt de voltooid-status van de taak om en informeert de oudercomponent over deze wijziging.

Hoe Alles Samenwerkt

1. TaskListComponent geeft een taak door aan TaskComponent via @Input();

2. De gebruiker voert een actie uit op de taak (zoals klikken op "Verwijderen");

3. TaskComponent zendt een event uit (onDelete of onToggle) met het id van de taak;

4. TaskListComponent vangt het event op en werkt de takenlijst bij;

5. Angular ververst automatisch de gebruikersinterface op basis van de bijgewerkte gegevens.

Op deze manier zorgen @Input() en @Output() voor een duidelijke, efficiënte communicatie tussen componenten, waardoor de structuur georganiseerd en reactief blijft.