Before proceeding to the next functions, it is necessary to wait for the DOM to finish rendering. The flow or lifecycle of this process is outlined below:
- Adding an item to the Array:
this.someFormArray.push((this.createForm({
name: 'Name'
type: type,
})))
- Executing functions that require access to HTML elements from the following step.
this.onSizeChange();
- Rendering HTML elements:
<ng-container *ngFor="let item of someFormArray.controls">
<img[src]="someUrl">
</ng-container>
The issue here is that the HTML render should actually happen in step 2. However, due to Angular's lifecycle processes, I have resorted to wrapping step 2. in a setTimeout function with a delay of 0ms, which triggers after the DOM has been rendered:
setTimeout(() => {
this.onSizeChange();
}, 0);
Although this workaround is functional, I am curious if there might be a better approach to address this issue.
Please note: This entire sequence is initiated by user actions such as changes or clicks, and not during the initialization phase or AfterViewInit lifecycle hook.