Angular Component Not Seeing Change In Array @Input()

Question

So I have an annoying set-up that is basically:

Parent Service (A) imported in Parent Component (B) Parent Component then passes an array of Objects to a Child Component (C), that are referenced from Parent Service (ie <child-component [input]="A.x"> where A.x = [{a},{b},...]).

This set-up basically can't be changed from, the service A can't be imported into component C due to the way we have tried to abstract some parts of our app to be re-usable in other tools we've made.

Usually, this has the annoying point of change detection not working but a work-around is to use x = [...x] or x=[]; x=dataArray;. Neither of these methods work with this exact array of objects (Esri ArcGIS Graphic objects). You can't even use lodash cloneDeep on these objects which I reckon has something to do with it.

I have tried:

• Doing the normal x = [...x] trick.
• Set x=[] then x=data.
• Using lodash clone and cloneDeep (cloneDeep outright fails).
• Using @Input() set function and @Input x: Graphics[] = [];
• Using a BehaviorSubject passed in then sending the data via subject.next(x) of that, it doesn't even trigger on .next(x) except for the very first time.

The first ever instance of changing from an empty array to an initially populated array works fine. When we then want to do any filtering on this array is where it fails.

I am basically out of ideas how to do it within the bounds of the parent component/service set-up. If anyone has any ideas, or wants to see the code in more detail I'm happy to try to strip it back and upload what I can.

Parent Component (HTML):

<app-gs-arcgis [basemap]="'hybrid'" [graphics]="estateDataDashboardSvc.dashGraphic" [graphicsSubject]="estateDataDashboardSvc.dashGraphicSubject" (clickedPoints)="displayTooltip($event)" [(center)]="center" [(zoom)]="zoom" [padding]="arcgisPadding" [filterEvent]="estateDashboardFiltersSvc.filterEvent" class="absolute w-full h-full"></app-gs-arcgis>

Parent Service (TS):

dashGraphic: Graphic[] = [];
dashGraphicSubject: Subject<Graphic[]> = new Subject<Graphic[]>();

...

this.dashGraphic = [];
const graphics: Graphic[] = [];
point.forEach((d, i) => {
const graphic = new Graphic({
    geometry  : d as any,
    symbol    : symbol[i],
    attributes: {
      data: d
    }
});
graphics.push(graphic);
});

this.dashGraphic = graphics;
this.dashGraphicSubject.next(this.dashGraphic);

Child Component (TS):

@Input() graphicsSubject = new Subject<Graphic[]>();

...

private _graphics: Graphic[] | null = [];

get graphics(): Graphic[] | null {
    return this._graphics;
}

@Input()
set graphics(graphics: Graphic[] | null) {
    console.log('Graphics received', graphics);
    this._graphics = graphics;
    this.rebuildGraphics();
}

...

ngOnInit() {
    ...
    this.graphicsSubject.subscribe(next => {
        console.log(next);
        this.graphics = next;
    });
}

Answer 1

Best approach IMO is to have the parent component provide the array to the child component via a Subject and the async pipe.

Each time the data is modified, the Subject emits a new array which contains the changes, i.e. immutable data structures and changing the @Input's reference. That way, even if the child is using ChangeDetectionStrategy.OnPush, it will still see the changes as the reference changes each time the data changes.

Answer 2

I haven't looked at the code all that much but I've experienced similar problems. Specifically the most important part is what change detection you've specified for your component. I suspect you've used the onPush strategy, which would mean change detection would only happen when references change. You haven't changed any references (your array reference remains constant). Using BehaviorSubject and async-pipe (as suggested elsewhere) might work, but only if the actual array reference changes. I would suggest changing your array reference by using immutable operations on the original. If this would cause efficiency problems I would look at generating change detection via an input setter. You can start by using immutable ops on your array.

You can also use the default change detection strategy, which does deeper change monitoring (monitors the contents of the object)