before jumping on my code, Please go through the issue which i have explained below:
I have two lists List A (Component 1) List B (Component 2). Data component (Component 3)
These all components are in one parent component.
On adding an item from List A to List B
newOptions: SortablejsOptions = {
animation: 200,
group: {
name: 'AttributeDropAreas',
put: true
},
sort: true,
onAddOriginal: (event) => {
this.data = {'name': 'deepender', 'companyLoc':'USA'}
},
};
this.data is Output to parent component and an Input to Data component (Component 3). Now issue is that in Component 3 I am not able to see my data in template. Now if I click on that area anywhere the data Component, data is visible.
I cross checked with native drop and drag events the code works fine, only issue when i am using the sortableJs. Also I noticed when input is being passed ngOnChanges (Component 3) life cycle hook of angular is also not getting triggered, and triggers only when i click on that area.
@Input() set data {
this.name = data.name; }
HTML:
<div>{{name}}</div>
As you said ngOnChanges is not being fired, that means the digest cycle has not picked up the changes.
In this case, you will have to manually fire up the digest cycle. So basically what I would suggest is create a new service and provide it in the parent component.
Now inject this service in all 3 child components.
Create an Observable/Subject in the service, and oninit of DATA component subscribe to that Observable/Subject of the service. In the success callback of this subscribe you can run detectChanges method of ChangeDetectionReference.
Now when you do an Output to the parent, at the same time do an emit on that Observable. This time your view should pick up the changes.
Let me know if that make sense.