Why the EventEmitter object does not emit the specified instance?
<p>I have these two components in Angular2, and a template for the <code>checklist</code> selector.</p>

<p>First, these are the two components: </p>

<pre class="lang-js prettyprint-override"><code>import {Component, EventEmitter} from '@angular/core';

export class ToDoItem{
    toDo: string;
    checked: boolean;

    constructor(toDo:string, checked: boolean){
        this.toDo = toDo;
        this.checked = checked;
    }
}

@Component({
    selector: 'to-do',
    inputs: ['toDoItem'],
    outputs: ['onToDoItemSelected'],
    styleUrls: ['./app.checklist.css'],
    template: `
        &lt;input type="checkbox"&gt;&lt;label class="strikethrough"&gt;{{toDoItem.toDo}}&lt;/label&gt;&lt;button (click)="itemClicked()"&gt;Delete&lt;/button&gt;
        `
})
export class ToDoItemComponent{
    toDoItem : ToDoItem;

    onToDoItemSelected: EventEmitter&lt;ToDoItem&gt;;

    constructor(){
        this.onToDoItemSelected = new EventEmitter();
    }

    itemClicked() : void {
        console.log(this.toDoItem);
        this.onToDoItemSelected.emit(this.toDoItem);
    }
}

@Component({
    selector: 'checklist',
    templateUrl: './app.checklist.html'
})
export class CheckList{
    toDoItems: Array&lt;ToDoItem&gt;;

    constructor(){
        this.toDoItems = [];
    }

    createToDo(description: string) : void {
        if (description !== ""){
            this.toDoItems.push(new ToDoItem(description, false));
        }
    }

    removeToDoItem(toDoItem: ToDoItem) : void {
        console.log(toDoItem);
        var indice = this.toDoItems.indexOf(toDoItem);
        this.toDoItems.splice(indice, 1);
    }
}

</code></pre>

<p>And this is the template file for the class <code>CheckList</code>:</p>

<pre class="lang-html prettyprint-override"><code>&lt;h2&gt;A Checklist&lt;/h2&gt;
&lt;span *ngIf="toDoItems.length == 0"&gt;
    There are not tasks yet...
&lt;/span&gt;
&lt;ul&gt;
    &lt;li *ngFor="let toDoItem of toDoItems"&gt;
        &lt;to-do [toDoItem]="toDoItem" (itemClicked)="removeToDoItem(toDoItem)"&gt;&lt;/to-do&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;hr&gt;

&lt;input type="text" placeholder="Enter the description..." #toDoDescription&gt;
&lt;button (click)="createToDo(toDoDescription.value); toDoDescription.value = '' "&gt;Add&lt;/button&gt;
</code></pre>

<p>Basically, the problem consists that it does not remove the item: the <code>EventEmitter</code> does not implicitly call <code>removeToDoItem</code>.</p>

<p>Some suggestions, ideas,.. to solve it?</p>