Build a todo list component using Angular $($v$4).$ Export the todo list component as "TodolListComponent $($export class Todolist Component$).$

Requirements:

$1.$ Users should be able to add items to the list:

Use an element to accept user input for the todo list item.

Use a element to append the text in the element as an item to the list and clear the element.

Use elements for todo list items as children of element. Todo list items should not be empty and there can be multiple items with the same value.

$2.$ Users should be able to mark$/$unmark items as completed:

Cross $($strikethrough$)$ the element when clicked to indicate that the item is completed and add is$-$done" class to the element.

Undo the cross when the item is clicked again and remove $"$is$-$done class from the element.

$3.$ Users should be able to track progress

Display a status message with the number of remaining tasks as $"$X remaining out of Y tasks", where X $=$ the number of incomplete tasks, Y $=$ the total number of items in list. Add task$-$counter" class to the status message $("$X remaining out of Y tasks"$)$ element

Assessment$/$Tools:

Use the animation below as a reference for your solution. You should focus on implementing the requirements, design$/$styling is not assessed and will not affect the score

The "Preview" tab will display your component. You can use it for testing purposes.

Available tools$/$packages:

Angular $($v$4\mathrm{.}3\mathrm{.}6)$

RxJS $(5\mathrm{.}4\mathrm{.}3)$

ZoneJs $(0\mathrm{.}8\mathrm{.}4)$

core$-$js $(2\mathrm{.}4\mathrm{.}1)$

Second item $1$ remaining out of $1$ tasks

First item