Issue 1:
Hi everyone,

I'm trying to extend a component using Class inheritance.

Here is my component (feed.ts)

@component({

selector: 'feed',

templateUrl: 'feed.html',

// providers: [provide(BaseListContainer, { useExisting: BaseListContainer })]

})

export class Feed extends BaseListContainer {

}

and my classe BaseListContainer is like that:

export class BaseListContainer {

@input() key: string;

}

The "feed" component is used in *.html like:

<feed [key]="somevalue">

The error I received is :

polyfills.js:3 Unhandled Promise rejection: Template parse errors:

Can't bind to 'key' since it isn't a known property of 'feed'. ("

This schema worked fine with angular2 Rc4 but not with angular2 final.

For more detail, I'am using Ionic2 Rc/ Typescript 2

Thanks for any help

Issue 2:
Currently, when classes with decorators are used in an inheritance chain, the results are undefined.

Consider the following two components:

@Component({selector: 'a', inputs: ['metaFoo'])
class A {
@Input() fieldFoo;
metaFoo;
}

@Component({selector: 'b', inputs: ['metaBar']}
class B extends A {
@Input() fieldBar;
metaBar;
}

Currently, using component B in JIT mode does not cause an error, but only inputs fieldBar and metaBar 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 B.annotations (where the @Component metadata lives) shadows A.annotations, and B.propMetadata (where the @Inputs live) shadows A.propMetadata.

If the @Input() fieldBar from B is removed, however, then B will have no property metadata, and so the lookup forB.propMetadata will reach A.propMetadata via the prototype chain and suddenly the fieldFoo input will become visible to Angular.

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.

Here is one set of rules which I believe covers most of the cases where users attempt to inherit components:

Class-level decorators (@Component and friends) have their metadata merged according to the merge rules:

Metadata objects are merged property by property.

For properties with primitive values, a subclass value, if present, overwrites a superclass value.

For properties with array values, the arrays are concatenated, superclass first.

If the subclass provides no value, the superclass value, if present, is used.

Property-level decorators (@Input, etc) on superclasses are included in compilation.

@Inputs with the same name on the superclass and subclass should have the same behavior as two @Inputs with the same name on the same class.

Applying these rules would change the behavior of the above example, so component B would have all 4 defined inputs recognized.

For JIT mode, this requires two changes to Angular.

First, the class-level decorators would be changed to check for metadata on the superclass, and perform the merging operation if present.

Secondly, the runtime compiler would need to consider superclass metadata when checking for property annotations.

For the AOT compiler, the semantics would have to be built into the compiler itself as the decorators don't execute during AOT compilation.