Within my code, I am utilizing two nested *ngFor loops. The first loop iterates through libraries, while the second one iterates through all items within each library, where a specific Angular component is dedicated to each item.
The issue arises when these item components are recreated with every change check in Angular. This was discovered by inserting a logger into the ngOnInit() handler of the item component. Each time any modification is made on the page, the logger is triggered, resulting in a reset of the component's state and loss of any changes. As a result, attempts to modify the component's state become ineffective, essentially breaking the functionality of the application.
Although I attempted to resolve this by implementing trackBy: trackByFn, it did not alleviate the problem.
Container:
<div *ngFor="let lib of libraries">
<div *ngIf="lib.components.length" class="groupContainer" [class.closed]="!libraryIsOpened(lib)">
<div class="title flex flex-row" (click)="toggleLibrary(lib)">
<p>{{ lib.name === '__none' ? 'No Library' : lib.name }} ({{ lib.components.length }})</p>
<div class="flex flex-grow"></div>
<i class="mdi mdi-chevron-up iconClose"></i>
<i class="mdi mdi-chevron-down iconOpen"></i>
</div>
<div class="content">
<app-component-list-item *ngFor="let c of components; trackBy: trackByFn"
class="flex"
[component]="c">
</app-component-list-item>
</div>
</div>
</div>
List Item:
import ...
@Component({
selector: 'app-component-list-item',
templateUrl: './component-list-item.component.html',
styleUrls: ['./component-list-item.component.scss']
})
export class ComponentListItemComponent implements OnInit {
@Input() component: PipelineComponent
constructor(private el: ElementRef, private nodeCreator: NodeCreationService) {
}
ngOnInit() {
console.log('init')
}
trackByFn(index, item) {
return this.component.componentID
}
}