bind-observable icon indicating copy to clipboard operation
bind-observable copied to clipboard

Feat: usage with properties inherited from parent Component

Open IlCallo opened this issue 6 years ago • 0 comments

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.

IlCallo avatar Mar 20 '19 13:03 IlCallo