Facing a perplexing issue with a component that is based on an abstract class, or at least that's my assumption.
There are multiple sibling components rendered using *ngFor based on an array length. These siblings, derived from an abstract class, receive their data through @Input properties, process it individually, and display it. Everything seemed to be working fine until I noticed a strange behavior where hovering over one of the components caused the data to dynamically mutate (for lack of a better term) and reset to the data of the last sibling within that template.
<Router-outlet>
<ParentComponent>
*ngFor
<Sibling1>
<ChildComponentA>
<ChildComponentB>
<Sibling2>
<ChildComponentA>
<ChildComponentB>
<SiblingN>
<ChildComponentA>
<ChildComponentB>
I've thoroughly checked all possible lines of code with breakpoints, and everything seems to be set up correctly. However, whenever I hover over the component, it appears that the change detection activates and fetches the data from the last sibling, overwriting the data for every other sibling in the template. This issue doesn't seem to affect the children of the siblings, as they still display the correct data. But the template of the hovered sibling component gets corrupted. I'm at a loss here. I've tried using [...array] and array.slice() to ensure unique arrays but haven't found a solution yet.
Provided below is a simplified sample code snippet:
parent.component.html
<ng-container *ngIf="v === 'user'">
<div *ngFor="let e of employees">
<div>
<h3>{{ e | name }}</h3>
</div>
<ng-container *ngTemplateOutlet="days; context: { e: e }"></ng-container>
</div>
</ng-container>
<ng-template #days let-l="l" let-e="e">
<div>
<sibling
[weeks]="weeks"
[viewMode]="v"
[loc]="l"
[emp]="e"
[realDates]="realDates"></sibling>
</div>
</ng-template>
And here is the sibling.component.html
<div *ngFor="let day of selectedWeek;">
<div>
<i *ngIf="viewMode == 'location'"
class="ico"
[ngClass]="{
'i-x-o': !day.isOpenOnDay && day.isSpecialDay,
'i-day-time': day.isOpenOnDay,
'is-special': day.isSpecialDay
}"></i>
<childA></childA>
</div>
<div>
<childB [day]="day"></childB>
</div>
</div>
<childB> maintains stability and accurately displays the data for day. However, hovering over childA, childB, or even the <i> element with icon classes results in the utilization of the day object from the last sibling. The selectedWeek property in the sibling component is sourced from the input weeks, then processed, sliced, and manipulated accordingly.
- parentComponent: ChangeDetectionStrategy.Default
- sibling: ChangeDetectionStrategy.OnPush
- childA: ChangeDetectionStrategy.Default
- childB: ChangeDetectionStrategy.OnPush