The updated content of app.component.html is as illustrated in the following code snippet:

<section> 
    <header> 
        <h1>todos</h1> 
        <input placeholder="Add new todo" autofocus="" [(ngModel)]="newTodoText"> 
        <button type="button" (click)="addTodo()">Add</button> 
    </header> 
    <section> 
        <ul> 
            <li *ngFor="let todo of 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="todos.length > 0"> 
        <span><strong>{{getPending().length}}</strong> {{getPending().length == 1 ? 'item' : 'items'}} left</span> 
        <button *ngIf="getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button> 
    </footer> 
</section> 

The TexBox input is applied with two-way binding using ngModel to bind the new Todo item, title. The Add button-click event is wired up with the addTodo method in AppComponent. The available Todo items will be listed in the <li> tag using ngFor that iterates each Todo item in TodoService. The checkbox rendered for each Todo item has its click event and 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.