ChangeDetection is not triggered after http put when using provideExperimentalZonelessChangeDetection on Angular 18 about angular HOT 7 CLOSED

AFAIK, that's completely expected. You're supposed to update signals (or call markForCheck()) in order for Angular to change the DOM, since there is no ZoneJS anymore to tell Angular that some asynchronous event was handled.

from angular.

Yes, this is the expected behavior. in zoneless apps, CD is fired on signal updates, AsyncPipe values and when template listeners fire.

from angular.

@JeanMeche @jnizet could you explain more, why everything works when I just removed that http put request? that http request is even not related to ui update. Do you mean when I use zoneless, I have to add CD manually for all async/await call?

from angular.

@asanoic When you remove that http request, you have a synchronous change caused by an event listener added through event binding in the template, which schedules a CD.
OTOH, when you add that http request, the change happens after an asynchronous http response that Angular is unaware of, since... you chose to use the experimental zoneless change detection.
Choosing zoneless CD is not something you can do without much much care: every change you make must be known by Angular. And the easiest way to do that is to use signals or the async pipe (like in OnPush components): if the code, whene receiving the http response, makes all the changes in the state by updating signals that are read by templates of components, then Angular will know that these components must be checked.

that http request is even not related to ui update

Well, it is indirectly, since you update the name of a tree node only after you receive the response to the http request.

from angular.

@jnizet thank you for your explanation. I got it, even I just change http request line to await firstValueFrom(timer(0));, UI is still not get updated.

Do you have any suggestion or best practice about how to handle this case? just simple adding a manual CD?
for example, I have a tree component, and only load the children (from new http request) when user click the node. all data structure is stored in a map (key is id, and unique for all tree node). before I use signal and zoneless, I just simple stored the json which I got from http, but now, if I want to trigger CD, I have to convert json to a signal version like

from

{
  id : string;
  name : string;
  children: string[];
  opened: boolean;
}

to

{
  id : WritableSignal<string>;
  name : WritableSignal<string>;
  children: WritableSignal<WritableSignal<string>[]>>;
  opened: WritableSignal<boolean>;
}

right?

is there any helper function can do this?

from angular.

A single signal containing an object (with id, name, children and opened) is probably sufficient, as long as you don't mutate the object, but create a new one that you store in the signal.
But I have far too few information on what your tree is supposed to do to provide a definitive answer.

from angular.

@jnizet I see...
I found a solution (or workaround), if Signal is a object and you have chance to mutate the object, when create signal use following:

  treeNodes = signal(new Map<string, any>(), { equal: () => false });

and when update, always call update, so I just change my code to:

  public async saveClicked(): Promise<void> {
    const result = await this.apiEntity.updateEntity(this.itemDetail());
    this.treeNodes.update(map => {
      map.get(this.itemDetail().id).name = this.itemDetail().name;
      return map;
    });
  }

it works.

Thanks. :)

from angular.