Fix associated models not triggering change detection when changing from an `UnresolvedModel` -> Resolved Model

[hudson-newey]

Describe the bug We can't use associated models directly in templates because associated models are fetched in async (and complete after page load). To fix this, we introduced the concept of an UnresolvedModel object. However, when the associated model is eventually resolved, change detection doesn't detect the change and won't update until an external event (e.g. mouseover)

My assumption is that we're allocating the UnresolvedModel and resolved model to the same memory address on the heap (since we're using an object). Meaning that when the object changes, the stack value doesn't change meaning no change detection.

To Reproduce Use an associated model or its properties in an Angular template

Possible fixes

• We could probably use RxJS (this would be a heavy solution since RxJS observables are quite heavy)
• Use immutable.js
• Use a signal
• Trigger change zone.js change detection manually (not optimal)
• Initialize two object. One for UnresolvedModel, one for a resolved model (which is initially empty). We then switch the two objects when the resolved model is no longer an empty object (changing the stack value and triggering change detection)

Additional context Blocks #2075

[hudson-newey]

The diagnostic was incorrect, and the real underlying issue was using ngx-datatable-column props with associations.

This bug will be resolved when we move away from ngx-datatable as part of #1730

A work around for now would be to replace code such as

<ngx-datatable-column props="creator">
    <ng-template let-value="value">
        Creator: {{ value }}
    </ng-template>
</ngx-datatable-column>

with

<ngx-datatable-column props="">
    <ng-template let-value="value">
        Creator: {{ value.creator }}
    </ng-template>
</ngx-datatable-column>

[hudson-newey]

Update since I got stuck on this bug again, and I want to document it:

Sometimes the hack above doesn't work. I was stuck because I know that the baw-user-link works because it's wrapped in a component (the component becomes responsible for change detection)

This seems like an issue we've run into before, and we use the baw-loading component as a wrapper component, making it responsible for async model resolution change detection.

Something similar to the code below should suffice:

Example Live Code