Say I have a directive MdCheckbox

@Component({ selector: 'md-checkbox' })
@View({template: '...'})
export class MdCheckbox {
  ...
}

and then create a child class for MdSwitch, as the functionality is identical:

@Component({ selector: 'md-switch' })
@View({template: '...'})
export class MdSwitch extends MdCheckbox { }

If we then have a demo app:

@Component({  selector: 'demo-app' })
@View({
  template: '<md-switch></md-switch>',
  directives: [MdSwitch]
})
class DemoApp { ... }

The <md-switch> element is totally inert / empty. However, if we change it to <md-checkbox> (which is not included in directives), an md-checkbox is rendered out. It seems that the annotations on MdCheckbox are overwriting the annotations on MdSwitch when the latter extends the former.

This used to work before the components were converted to TypeScript, making it even more clear that this has something to do with TS decorators.

FYI @vsavkin @rkirov