title: function for parameter for component in angular
body: <p>How can I say that my angular2 component can receive a function as a parameter?</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors: Can't bind to 'click' since it
    isn't a known property of 'input'. ("   minlength="{{minlength}}"</p>
    
    <p>[ERROR ->]click="{{click}}"</p>
    
    <blockquote>
      <p>"): ng:///AppModule/InputTextComponent.html@12:2</p>
    </blockquote>
  </blockquote>
  
  <p>ComponentInput.ts</p>
  
  <pre><code>    import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
  import { NgModel } from '@angular/forms';
  
  @Component({
    selector: 'app-input-text',
    templateUrl: './input-text.component.html',
    styleUrls: ['./input-text.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class InputTextComponent implements OnInit {
  
    @Input() id: string;
    @Input() name: string;
  
    @Output() click = new EventEmitter();  
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>Template Input Component:</p>
  
  <pre><code>    &lt;input 
    type="text" 
    id="{{id}}" 
    name="{{name}}" 
    click="{{click}}"
    &gt;
  </code></pre>
  
  <p>Component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    clique() {
      console.log('Clicando...')
    }
  }
  </code></pre>
  
  <p>Componente.html</p>
  
  <pre><code>&lt;app-input-text 
        id="2" 
        name="nome" 
        (click)="clique(event)"
        ngDefaultControl&gt;
  
      &lt;/app-input-text&gt;
  </code></pre>