<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] feature request"><pre class="notranslate"><code class="notranslate">[X] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Bi-directional binding (Bannana in a box) don't work out-of-the-box for parent/child component, with child event emitter.  Parent component property is not updated.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">Avoid duplication of binding attibutes.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Parent template (DONT WORK):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;userEdit [(toggleEditInPlace)]=&quot;toggleEditInPlace&quot; 
      [hidden]=&quot;!toggleEditInPlace&quot;&gt;
&lt;/userEdit&gt;"><pre class="notranslate"><code class="notranslate">&lt;userEdit [(toggleEditInPlace)]="toggleEditInPlace" 
      [hidden]="!toggleEditInPlace"&gt;
&lt;/userEdit&gt;
</code></pre></div>
<p dir="auto">Parent template (WORKS):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;userEdit [toggleEditInPlace]=&quot;toggleEditInPlace&quot; (toggleEditInPlace)=&quot;toggleEditInPlace=$event&quot; 
      [hidden]=&quot;!toggleEditInPlace&quot;&gt;
&lt;/userEdit&gt;"><pre class="notranslate"><code class="notranslate">&lt;userEdit [toggleEditInPlace]="toggleEditInPlace" (toggleEditInPlace)="toggleEditInPlace=$event" 
      [hidden]="!toggleEditInPlace"&gt;
&lt;/userEdit&gt;
</code></pre></div>
<p dir="auto">Child component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  @Input() toggleEditInPlace:boolean=false;
  @Output('toggleEditInPlace') toggleEditInPlaceEvent=new EventEmitter&lt;boolean&gt;();"><pre class="notranslate"><code class="notranslate">  @Input() toggleEditInPlace:boolean=false;
  @Output('toggleEditInPlace') toggleEditInPlaceEvent=new EventEmitter&lt;boolean&gt;();
</code></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</li>
</ul>
<p dir="auto">Hi all!</p>
<p dir="auto">Is it possible to extend DOM Elements with Angular 2?<br>
In a way I can use it like:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button value=&quot;Click!&quot; is=&quot;extended-button&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">value</span>="<span class="pl-s">Click!</span>" <span class="pl-c1">is</span>="<span class="pl-s">extended-button</span>" /&gt;</pre></div>
<p dir="auto">Thanks in advance,<br>
Tiago Braga</p>