<p dir="auto">Hi everyone,<br>
I'm trying to extend a component using Class inheritance.</p>
<p dir="auto">Here is my component (feed.ts)</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/component/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/component">@component</a>({<br>
selector: 'feed',<br>
templateUrl: 'feed.html',<br>
// providers: [provide(BaseListContainer, { useExisting: BaseListContainer })]<br>
})<br>
export class Feed extends BaseListContainer {<br>
}</p>
<p dir="auto">and my classe BaseListContainer is like that:</p>
<p dir="auto">export class BaseListContainer  {<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a>() key: string;<br>
}</p>
<p dir="auto">The "feed" component is used in *.html like:<br>
&lt;feed [key]="somevalue"&gt;</p>
<p dir="auto">The error I received is :<br>
polyfills.js:3 Unhandled Promise rejection: Template parse errors:<br>
Can't bind to 'key' since it isn't a known property of 'feed'. ("</p>
<p dir="auto">This schema worked fine with angular2 Rc4 but not with angular2 final.<br>
For more detail, I'am using Ionic2 Rc/ Typescript 2</p>
<p dir="auto">Thanks for any help</p>
<p dir="auto">Currently, when classes with decorators are used in an inheritance chain, the results are undefined.</p>
<p dir="auto">Consider the following two components:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({selector: 'a', inputs: ['metaFoo'])
class A {
  @Input() fieldFoo;
  metaFoo;
}

@Component({selector: 'b', inputs: ['metaBar']}
class B extends A {
  @Input() fieldBar;
  metaBar;
}"><pre class="notranslate"><code class="notranslate">@Component({selector: 'a', inputs: ['metaFoo'])
class A {
  @Input() fieldFoo;
  metaFoo;
}

@Component({selector: 'b', inputs: ['metaBar']}
class B extends A {
  @Input() fieldBar;
  metaBar;
}
</code></pre></div>
<p dir="auto">Currently, using component <code class="notranslate">B</code> in JIT mode does not cause an error, but only inputs <code class="notranslate">fieldBar</code> and <code class="notranslate">metaBar</code> will be understood by Angular. This is because the decorators result in properties being defined on the class functions, and those properties are subject to shadowing via prototypical inheritance. So <code class="notranslate">B.annotations</code> (where the <code class="notranslate">@Component</code> metadata lives) shadows <code class="notranslate">A.annotations</code>, and <code class="notranslate">B.propMetadata</code> (where the <code class="notranslate">@Input</code>s live) shadows <code class="notranslate">A.propMetadata</code>.</p>
<p dir="auto">If the <code class="notranslate">@Input() fieldBar</code> from <code class="notranslate">B</code> is removed, however, then <code class="notranslate">B</code> will have no property metadata, and so the lookup for<code class="notranslate">B.propMetadata</code> will reach <code class="notranslate">A.propMetadata</code> via the prototype chain and suddenly the <code class="notranslate">fieldFoo</code> input will become visible to Angular.</p>
<p dir="auto">There is no provision in the spec for inheritance of decorator metadata. However, Angular could be made to support well-defined rules of inheritance for its own decorators.</p>
<p dir="auto">Here is one set of rules which I believe covers most of the cases where users attempt to inherit components:</p>
<ul dir="auto">
<li>Class-level decorators (<code class="notranslate">@Component</code> and friends) have their metadata merged according to the merge rules:
<ul dir="auto">
<li>Metadata objects are merged property by property.</li>
<li>For properties with primitive values, a subclass value, if present, overwrites a superclass value.</li>
<li>For properties with array values, the arrays are concatenated, superclass first.</li>
<li>If the subclass provides no value, the superclass value, if present, is used.</li>
</ul>
</li>
<li>Property-level decorators (<code class="notranslate">@Input</code>, etc) on superclasses are included in compilation.
<ul dir="auto">
<li><code class="notranslate">@Input</code>s with the same name on the superclass and subclass should have the same behavior as two <code class="notranslate">@Input</code>s with the same name on the same class.</li>
</ul>
</li>
</ul>
<p dir="auto">Applying these rules would change the behavior of the above example, so component <code class="notranslate">B</code> would have all 4 defined inputs recognized.</p>
<p dir="auto">For JIT mode, this requires two changes to Angular.</p>
<p dir="auto">First, the class-level decorators would be changed to check for metadata on the superclass, and perform the merging operation if present.</p>
<p dir="auto">Secondly, the runtime compiler would need to consider superclass metadata when checking for property annotations.</p>
<p dir="auto">For the AOT compiler, the semantics would have to be built into the compiler itself as the decorators don't execute during AOT compilation.</p>