Hoe zijn ze verbonden?

De TaskListComponent beheert een array van taken, waarbij elke taak een object is met de velden id, title en completed. Om elke taak weer te geven, 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 het uitzenden van events.

Implementatie van de logica van TaskListComponent

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 eruit 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 itereren en voor elke taak een TaskComponent te maken. We bekijken in de volgende sectie nader hoe *ngFor werkt.

• [task]="task" — geeft de huidige taak door aan de child-component 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. Ze maken het mogelijk om data in een component te plaatsen en events uit een component te versturen. 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 bovenliggende TaskListComponent wordt doorgegeven aan de TaskComponent.

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

@Output() en EventEmitter worden gebruikt om de oudercomponent te informeren wanneer er iets gebeurt in het kind. Deze decorateurs stellen de kindcomponent in staat om acties zoals het verwijderen van taken of het wijzigen van statussen 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() wisselt de voltooiingsstatus van de taak 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.