ngFor not auto re-rendering, possiblity to auto bind?

Question

I am currently doing a ngFor on options for select input. The problem is that until my fetch request of data is not finish, the array who will be render is empty. So my Select input is empty on the page, and when my get request is finish the array is updated but not my frontend.

I found a solution who is to fire "this.changeDetection.detectChanges()" just after my array update. But it looks strange, there is no possibility to bind it automaticaly?

Thanks in advance,

Answer 1

You can use async pipe with an observable for ngFor: https://ultimatecourses.com/blog/angular-ngfor-async-pipe

Answer 2

I believe if your fetch requests are subscribing to an http call (ex: return this.http.get('my-endpoint') via httpClient) then angular will detect changes after the call completes.

If you are manually doing a fetch of some sort it is an async event that is not tied to the change detection loop, so you have to manually tell angular to run change detection to update the dom/template.

Async pipe may also work, but ideally just use httpClient and things should work without the need for anything else.