Problem with Angular lifecycle in Angular 19

I had some problems with the animations in my page and decided to verify the activation of the animations so modified the code in this way:

BaseLayout.ts

export class BaseLayoutComponent implements AfterViewInit
{
public readonly navJson: string = AppConfig.get('baseProjectUrl') + '/assets/jsons/navigation.json';

loaded: number = 0; // loaded: boolean = false;

constructor()
{ }

ngAfterViewInit()
{ this.LoadLists(); }

LoadLists()
{
fetch(this.navJson).then(res => res.json()).then(collection =>
{ this.navigation = collection; });

setTimeout(()=> { this.loaded++; }, 2000); // this.loaded = true; }, 2000);
}


BaseLayout.html

<div id="LoadingScreen" [ngClass]="{ 'Disolves': loaded > 0 }">
<img src="assets/images/Logo.svg" alt="Logo" class="Breath"/>
</div>

<span style="position: fixed; z-index: 10000000; top: 0; left: 0;">{{ loaded }}</span>


For some reason the loaded value starts as 1 then changes to 0 in less than a second then the code executes normally (changes to 1 after 2 seconds approximately), what can be the problem here?

Continue reading...