We have the required properties and methods in the AppComponent class. Now, let's add the template to show a todo list, a textbox to get the title of a todo item from the user, an add button to add a new todo item, a checkbox for each todo item to mark them as completed, a button for each todo item to delete them, and a button at the bottom of the template to remove the completed todo items from the todo list. The following is the updated code snippet of AppComponent with all the mentioned features:

<section>   
    <header>   
          <h1>todos</h1>   
        <input placeholder="Add   new todo" autofocus="" [(ngModel)]="newTodoText">   
        <button type="button"   (click)="addTodo()">Add</button>   
    </header>   
    <section *ngIf="todoService.todos.length   > 0">   
        <ul>   
            <li *ngFor="let   todo of todoService.todos">   
                <input type="checkbox"   (click)="toggleCompletion(todo)" [checked]="todo.completed">   
                  <label>{{todo.title}}</label>   
                <button   (click)="remove(todo)">X</button>   
            </li>   
        </ul>   
    </section>   
    <footer *ngIf="todoService.todos.length   > 0">   
          <span><strong>{{todoService.getPending().length}}</strong>   {{todoService.getPending().length == 1 ? 'item' : 'items'}} left</span>   
        <button *ngIf="todoService.getCompleted().length   > 0" (click)="removeCompleted()">Clear completed</button>   
    </footer>   
</section>   

As you can see, we applied two-way binding using ngModel to the input control in order to bind the new todo item, title. We assigned the addTodo method to the click event of the Add button to add a new todo item to the in-memory collection of Todo items in todoService. We applied ngFor to the <li> tag to iterate each Todo item in todoService. The checkbox rendered for each Todo item has its click event, the checked property mapped with the toggleCompletion method, and a completed property of the Todo item, respectively. Next, the remove button has its click event mapped with the remove method in AppComponent.

The footer tag has a span that displays the pending Todo items' count and a button to remove the completed todo items from the list. This button has a click event mapped with the removeCompleted method in AppComponent.

Let's run the application by pressing F5, and you will be able to perform all the operations, such as adding, removing, and listing todo items: