Task: Enhance a basic to$-$do list application by breaking it down into multiple components.

Step $1$: Set Up A Development Environment $(Ensure$ using node.$js)$

Step $2$: Create a New Angular Project

Step $3$: Create Components for the To$-$Do List

Generate a new component named "todo$-$list" using the Angular CLI: $"$ng generate component todo$-$list"

Generate additional components for your to$-$do list application:

$-$header: for the header section of your application.

$-$todo$-$input: for the input field to add new tasks.

$-$todo$-$item: for displaying individual to$-$do list items.

$-$Use the Angular CLI commands as shown above to generate these components.

Step $4$: Implement To$-$Do List Functionality

$-$Open the respective component files $($e$.$g$.,$ todo$-$list.component.ts$,$ todoinput.component.ts$,$ etc.$).$

$-$Implement the necessary properties and methods for each component to manage the to$-$do list:

$-$todo$-$list component should manage the list of tasks.

$-$todo$-$input component should handle adding new tasks.

$-$todo$-$item component should handle displaying individual tasks.

Utilize Angular's component interaction techniques like @Input and @Output to pass data between components.

Step $5$: Styling The To$-$Do List

Create CSS files for styling the components.

Step $6$: Test The To$-$Do List Application