Welke componenten zijn nodig?

Je weet al wat een component is. Nu is het tijd om je eigen component te maken die in de app gebruikt kan worden.

De applicatie zal bestaan uit twee componenten. De eerste is de TaskComponent, die verantwoordelijk is voor het weergeven van een enkele taak. In deze component toon je de id, title en status van de taak. Je voegt ook knoppen toe waarmee de gebruiker de taak kan voltooien of verwijderen.

De tweede component is de TaskListComponent, die fungeert als een wrapper voor alle taken. Deze bevat een array van taken en toont elke taak met behulp van de TaskComponent. Deze component behandelt ook de logica voor het toevoegen, bijwerken en verwijderen van taken.

Kortom, de TaskComponent verzorgt het uiterlijk en gedrag van een enkele taak, terwijl de TaskListComponent de volledige lijst van taken en de interactie daartussen beheert.

Regels voor het aanmaken van een component

In Angular gebruik je de Angular CLI om componenten aan te maken. Dit is een handig hulpmiddel dat automatisch alle benodigde bestanden genereert en het component integreert op de juiste plek in je project.

Je moet twee componenten aanmaken: TaskComponent en TaskListComponent. Eén is verantwoordelijk voor het weergeven van individuele taken, de ander beheert de lijst met taken.

Projectstructuur

Om alles overzichtelijk te houden, maken we voor elk component een aparte map aan binnen de src/app-directory. Dit maakt de codebase eenvoudiger te navigeren en te onderhouden, vooral naarmate de applicatie groeit.

Het aanmaken van de TaskComponent

Om een component te genereren, gebruik je de Angular CLI. Open de terminal in VS Code en zorg dat je in de hoofdmap van je project staat. Voer vervolgens het volgende commando uit:

Of, een kortere versie:

Hier volgt een overzicht van het commando:

Na het uitvoeren van het commando wordt er een nieuwe map task aangemaakt in src/app, met daarin vier bestanden:

Dit is de standaardconfiguratie voor elke component. Het enige verschil is het voorvoegsel in de bestandsnamen (task in dit geval), dat afkomstig is van de naam die je hebt opgegeven in het generate-commando.

Het aanmaken van de TaskListComponent

Laten we nu de component voor de takenlijst aanmaken, net zoals we eerder hebben gedaan. Voer het volgende commando uit:

Hiermee wordt een nieuwe map task-list aangemaakt met de volgende bestanden:

Deze bestanden dienen hetzelfde doel als in de TaskComponent, maar nu zijn ze bedoeld voor de tweede component.

Op dit punt heb je twee afzonderlijke componenten met een duidelijke structuur: TaskComponent, die de logica en template voor een enkele taak beheert, en TaskListComponent, die de volledige lijst van taken beheert.