title: Argument of type 'Event' is not assignable to parameter of type 'string'
body: <p>in the below code I want to use the <code>EventEmitter</code> to result in calling the method <code>onlyNewAddedItems</code>.</p>
  <p>I defined the <code>EventEmitter</code> instance and the method that emits the event as shown below:</p>
  <pre><code>@Output() newItemValue = new EventEmitter&lt;string&gt;();
  
    addNewItem(val : string) {
      this.newItemValue.emit(val);
      console.log(&quot;add new item:&quot; + val);
      this.items.push(val);
    }
  </code></pre>
  <p>To bind to third event I did the following:</p>
  <pre><code>&lt;h1 (newItemValue) = onlyNewlyAddedItems($event)&gt;&lt;/h1&gt;
  </code></pre>
  <p>but when I compile the code, I receive the following error</p>
  <pre><code>Error: src/app/app.component.html:4:42 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.
  
  4 &lt;h1 (newItemValue) = onlyNewlyAddedItems($event)&gt;&lt;/h1&gt;                                        
    src/app/app.component.ts:5:16
      5   templateUrl: './app.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component AppComponent.
      
  </code></pre>
  <p>Please, let me know how to execute the method <code>onlyNewlyAddedItems</code> via <code>EventEmitter</code>.</p>
  <p><strong>AppComponent.component.ts</strong>:</p>
  <pre><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'InputOutputBindings';
    currentItem = 'TV';
    items = ['item1', 'item2', 'item3', 'item4'];
  
    @Output() newItemValue = new EventEmitter&lt;string&gt;();
  
    addNewItem(val : string) {
      this.newItemValue.emit(val);
      console.log(&quot;add new item:&quot; + val);
      this.items.push(val);
    }
  
    onlyNewlyAddedItems(val : string) {
      console.log(&quot;onlyNewlyAddedItems:&quot; + val);
    }
  }
  </code></pre>
  <p><strong>app.component.html</strong>:</p>
  <pre><code>&lt;h1 #test = customdirective appItemDetails [item]=&quot;currentItem&quot;&gt;{{currentItem}}  item&lt;/h1&gt;
  &lt;label&gt;Add an item: &lt;input #newItem&gt;&lt;/label&gt;
  &lt;button (click) = addNewItem(newItem.value)&gt;add new item&lt;/button&gt;
  &lt;h1 (newItemValue) = onlyNewlyAddedItems($event)&gt;&lt;/h1&gt;
  </code></pre>