I am facing a challenge while trying to enhance a 3rd party component with custom functionality by encapsulating it within a custom component.
The issue I am encountering relates to property binding - how can I establish a two-way property bind between the parent, wrapper, and 3rd party component? (A linked-two-way bound property :)
Therefore, the simplified HTML template would appear as follows
wrapper-component.html
<someCompotentToExtend [(ngModel)]="wrapProperty"></someCompotentToExtend>
}
wrapper-component.ts
export class WrapperComponent{
wrapProperty:string=""
}
and in the parent component, I would implement something like this
parent-component.html
<wrapper-component [(wrapProperty)]="parentProperty"></<wrapper-component>
parent-component.ts
export class ParentComponent{
parentProperty:string=""
}
Any changes made to these properties should automatically update all other bound properties?
I have conducted several tests, approaching solutions in the following examples but they seem too convoluted and not producing the desired outcome in the end
First solution
Utilizing @Input @Output in the wrapper component or on model change event. The wrapper component possesses an intermediary property, such as wrapProperty, which is bound to the 3d party component or monitoring for alterations.
This approach seems to somewhat work. However, in my scenario, it's not ideal as after the wrapper updates the parent, the parent will then update the wrapper component again :??? :)
export class WrappedComponentComponent {
wrapProperty:string=""
@Input() set propertyFromParent(value: string) {
this.wrapProperty= value;
}
@Output() propertyFromParentChange= new EventEmitter();
Second solution
Exploring the use of this framework ngx-context. It's quite powerful, establishing a temporary local provider service that facilitates data sharing. Nevertheless, it necessitates additional syntax when invoking the wrapper component, and I prefer a more encapsulated approach.
Is it feasible to create a chained two-way binding system for properties? Thank you for any assistance provided