Angular2: Add decorators to inherited decorators in a child class

Question

I have the following code in my Angular2 project:

@Component({selector: 'foo'})
export class Foo {
    @Input() protected field:any;
}

@Component({selector: 'bar'})
export class Bar extends Foo {
    ngOnInit(): void {
        if (this.field) {
            // do something
        }
    }
}

In this case all work like a charm: field is successfully set in the Component "Bar".

But if I try to add one or more Input to the child Component it doesn't work. Here is the new code:

@Component({selector: 'foo'})
export class Foo {
    @Input() protected field:any;
}

@Component({selector: 'bar'})
export class Bar extends Foo {
    @Input() private anotherField:any;

    ngOnInit(): void {
        if (this.field) {
            // do something
        }
    }
}

In this case I get the following error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'field' since it isn't a known property of 'bar'.

It seems that setting the new Decorator variable (anotherField) hides the inherited Decorator variables. Am I right?

So, how to add one or more Decorator variables to a class that extends a class that has its own Decorators?

EDIT: I'm currently using Angular 2.4.2.