Feat: usage with properties inherited from parent Component
I'm wondering if there could be a way to make @BindObservable() work with properties inherited from a parent Component.
Example:
@Component({
selector: 'some-component',
templateUrl: './some-component.html',
styleUrls: ['./some-component.scss']
})
export class SomeComponent {
@Input() property!: string;
}
@Component({
selector: 'some-child-component',
templateUrl: './some-child-component.html',
styleUrls: ['./some-child-component.scss']
})
export class SomeChildComponent extends SomeComponent {
// How to put @BindObservable on 'property' without re-defining it?
}
Could it be a supported use case?
Problem is the decorator won't be able to attach itself to a property, but this can be changed allowing @BindObservable to accept also a class, instead of a property, and behave differently depending on where it is attached.
Example for API extension
@Component({
selector: 'some-component',
templateUrl: './some-component.html',
styleUrls: ['./some-component.scss']
})
export class SomeComponent {
@Input() property!: string;
@Input() property2!: string;
}
@BindObservable([ 'property', [ 'property2', 'property2Observable' ] ])
@Component({
selector: 'some-child-component',
templateUrl: './some-child-component.html',
styleUrls: ['./some-child-component.scss']
})
export class SomeChildComponent extends SomeComponent {}
When a plain string or a single element array is found ([ 'property' ] or [ [ 'property' ] ]) the observable is created as the property name plus $.
When a 2-elements array is provided ([ [ 'property2', 'property2Observable' ] ]), the first one is the name of the original property to use, the second is the name of the observable property.