fix: change detection is triggered once children are updated with sch…

…ool info

src/app/child-dev-project/children/children-list/children-list.component.spec.ts

@@ -1,10 +1,4 @@
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-  waitForAsync,
-} from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { ChildrenListComponent } from "./children-list.component";
 import { ChildrenService } from "../children.service";
 import { of } from "rxjs";
@@ -105,17 +99,19 @@ describe("ChildrenListComponent", () => {
     expect(component).toBeTruthy();
   });
 
-  it("should load children on init", fakeAsync(() => {
+  it("should load children on init", () => {
     component.isLoading = true;
     const child1 = new Child("c1");
     const child2 = new Child("c2");
     mockChildrenService.getChildren.and.returnValue(of([child1, child2]));
     component.ngOnInit();
-    tick();
+
+    let children = [];
+    component.childrenList.subscribe((val) => (children = val));
     expect(mockChildrenService.getChildren).toHaveBeenCalled();
-    expect(component.childrenList).toEqual([child1, child2]);
+    expect(children).toEqual([child1, child2]);
     expect(component.isLoading).toBeFalse();
-  }));
+  });
 
   it("should route to the given id", () => {
     const router = fixture.debugElement.injector.get(Router);

src/app/child-dev-project/children/children-list/children-list.component.ts

@@ -1,20 +1,21 @@
 import { Component, OnInit } from "@angular/core";
 import { Child } from "../model/child";
 import { ActivatedRoute, Router } from "@angular/router";
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { ChildrenService } from "../children.service";
 import { EntityListConfig } from "../../../core/entity-components/entity-list/EntityListConfig";
 import { RouteData } from "../../../core/view/dynamic-routing/view-config.interface";
 import { RouteTarget } from "../../../app.routing";
 import { EntityListComponent } from "../../../core/entity-components/entity-list/entity-list.component";
+import { Observable } from "rxjs";
+import { AsyncPipe } from "@angular/common";
+import { startWith, tap } from "rxjs/operators";
 
-@UntilDestroy()
 @RouteTarget("ChildrenList")
 @Component({
   selector: "app-children-list",
   template: `
     <app-entity-list
-      [allEntities]="childrenList"
+      [allEntities]="childrenList | async"
       [listConfig]="listConfig"
       [isLoading]="isLoading"
       [entityConstructor]="childConstructor"
@@ -23,10 +24,10 @@ import { EntityListComponent } from "../../../core/entity-components/entity-list
     ></app-entity-list>
   `,
   standalone: true,
-  imports: [EntityListComponent],
+  imports: [EntityListComponent, AsyncPipe],
 })
 export class ChildrenListComponent implements OnInit {
-  childrenList: Child[] = [];
+  childrenList: Observable<Child[]>;
   listConfig: EntityListConfig;
   childConstructor = Child;
   isLoading = true;
@@ -41,13 +42,10 @@ export class ChildrenListComponent implements OnInit {
     this.route.data.subscribe(
       (data: RouteData<EntityListConfig>) => (this.listConfig = data.config)
     );
-    this.childrenService
-      .getChildren()
-      .pipe(untilDestroyed(this))
-      .subscribe((children) => {
-        this.childrenList = children;
-        this.isLoading = false;
-      });
+    this.childrenList = this.childrenService.getChildren().pipe(
+      startWith([]),
+      tap((res) => (this.isLoading = res.length === 0))
+    );
   }
 
   routeTo(route: string) {

src/app/child-dev-project/children/children.service.ts

@@ -48,7 +48,7 @@ export class ChildrenService {
         loadedChild.schoolClass = childCurrentSchoolInfo?.schoolClass;
         loadedChild.schoolId = childCurrentSchoolInfo?.schoolId;
       }
-      results.next(loadedChildren);
+      results.next([...loadedChildren]);
       results.complete();
     });