I'm embarking on my maiden voyage into the world of open source projects with a school gradebook. Despite being new to Angular, I'm facing a challenge regarding the runtime performance of the application. The generation of form controls dynamically based on students and assignments is proving to be time-consuming in terms of rendering.
Although I attempted to detach the change detector, it still lags behind when triggered during change detection.
A deep dive into Chrome Dev Tools reveals that a significant chunk of time is consumed in the process of change detection.
private createFormControls( ) {
const gradeGroup = this.gradeControls;
this.clearAllGradeControls(gradeGroup);
for (let i = 0; i < this.gradebook.students.length; i++) {
const student = this.gradebook.students[i];
const studentGrades = this.gradebook.grades.filter( g => g.userId == student.userId);
for (let j = 0; j < this.gradebook.assignments.length; j++) {
const assignment = this.gradebook.assignments[j];
const key = this.createKey(student.userId, assignment.id);
const grade = studentGrades.find( g => g.assignmentId == assignment.id );
let fg = new FormGroup({
grade: new FormControl(grade ? grade.grade : ''),
userId: new FormControl(student.userId),
assignmentId: new FormControl(assignment.id),
});
gradeGroup.addControl(key, fg);
}
}
}
Stackblitz https://stackblitz.com/github/omarolivo/Gradebook
Github: https://github.com/omarolivo/Gradebook
How can I optimize the performance while dynamically generating rows and columns of form controls?
UPDATE
Upon identifying the root cause of the performance issue, it seems that change detection plays a major role in slowing down the component. I've experimented with converting the data array into an RxJS observable, yet the struggle persists with change detection.
Any recommendations on the most efficient pattern/architecture to leverage change detection?