title: Angular 2 duplicate component in template reference another element
body: <p>Simplified I have a component that can be used multiple times within any template.  How would I get my component <em>click-me</em> to pair with the input element below it so when the event (click in this case) is fired it will apply (change the input type to hidden in this case) to that input.  Obviously the approach is important here not the hide!</p>
  
  <blockquote>
    <p>What can I add to pair them keeping the duplicate component generic and autonomous?</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/GzAVj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GzAVj.png" alt="enter image description here"></a></p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'click-me',
      template: `&lt;button (click)="onClickMe()"&gt;Hide A Friend Input&lt;/button&gt;`
  })
  </code></pre>
  
  <p><strong>COMPONENT</strong></p>
  
  <pre><code>export class DuplicateComponent {
      onClickMe() {
          alert("try change type");
          this.type = "hidden";
      }
  }
  </code></pre>
  
  <p><strong>TEMPLATE</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;click-me&gt;&lt;/click-me&gt;
    &lt;input type="input" value="friend 2 to hide" id="clickme1"&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;click-me&gt;&lt;/click-me&gt;
    &lt;input type="input" value="friend 2 to hide" id="clickme2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/OKp1ZDGa9TTgAiDcAIbS?p=preview" rel="nofollow noreferrer">Click here for Plunker</a></p>