You already know what a component is. Now it's time to create your own component that can be used in the app.

What Components Do We Need?

You already know what a component is. Now it's time to create your own component that can be used in the app.

The application will consist of two components. The first one is the TaskComponent, which is responsible for displaying a single task. Inside this component, we'll show the task's id, title, and status. We'll also add buttons that let the user complete or delete the task.

The second component is the TaskListComponent, which acts as a wrapper for all tasks. It holds an array of tasks and displays each one using the TaskComponent. This component will also handle the logic for adding, updating, and deleting tasks.

In short, the TaskComponent handles the appearance and behavior of a single task, while the TaskListComponent manages the full list of tasks and the interaction between them.

Rules for Creating a Component

In Angular, we use the Angular CLI to create components. It's a handy tool that automatically generates all the necessary files and integrates the component into the right part of your project.

We need to create two components: TaskComponent and TaskListComponent. One will be responsible for displaying individual tasks, and the other will manage the list of tasks.

Project Structure

To keep things organized, we'll create a separate folder for each component inside the src/app directory. This will make the codebase easier to navigate and maintain, especially as the application grows.

Creating the TaskComponent

To generate a component, we'll use the Angular CLI. Open the terminal in VS Code and make sure you're in the root of your project. Then run the following command:

Or, a shorter version:

Here's a breakdown of the command:

ng generate (or ng g) — Angular CLI command to generate files;

component (or c) — tells the CLI to create a component;

task — the name of the new component.

After running the command, a new task folder will be created inside src/app, containing four files:

task.component.ts — contains the component class;

task.component.html — contains the HTML template;

task.component.css — contains the styles;

task.component.spec.ts — used for unit testing.

You've seen this kind of file structure before — it's the standard setup for any component. The only difference is the prefix in the filenames (task in this case), which comes from the name you provided in the generate command.

Creating the TaskListComponent

Let's now create the component for the task list, just like we did before. Run the following command:

This will generate a new task-list folder containing the following files:

• task-list.component.ts;

• task-list.component.html;

• task-list.component.css;

• task-list.component.spec.ts.

These files serve the same purposes as in the TaskComponent, but now they're for the second component.

At this point, we have two separate components with a clear structure: TaskComponent, which handles the logic and template for a single task, and TaskListComponent, which manages the entire list of tasks.