0

I have parent which contains router outlet which is calling 4 more child components inside it. All the components has image tags inside them. Is there any way to show a loading indicator from parent component until all assets in parent component and child component are fully loaded.

I have tried this approach in ngAfterViewInit, but it is not working as expected, first it shows the loader then hide's it and background image in parent component is loading step by step. Similar like when we preview a large image in google. I want to hide the loader when images are fully loaded.

Parent Component HTML

<ng-container *ngIf="isLoading == true">
    <img src="./assets/images/loading.gif" alt="" width="20" height="20" />
</ng-container>
<ng-container *ngIf="isLoading == false">
    <section class="landing-page-outer">
       <div class="container">
          <div class="landing-page-inner">
             <div class="landing-page-bg">
                <img src="./assets/images/landing-bg.png" alt="" width="1920" height="1080" />
             </div>
             <div class="landing-content">
                <router-outlet></router-outlet>
             </div>
          </div>
       </div>
    </section>
</ng-container>

Parent Component TS

public isLoading : boolean = true;

ngAfterViewInit() {
    this.isLoading = false;   
}

Child component HTML

<div class="landing-child-block">
   <div class="landing-child-heading">
     <h3>heading</h3>
   </div>
   <div class="landing-child-image">
      <img src="./assets/images/landing-child-image.jpeg" alt="" width="200" height="200" />
   </div>
</div>
RAHUL KUNDU
  • 154
  • 7

1 Answers1

0

you can use load attribute and execute your logic on top of that.

<img [src]="source" (load)="doAnything()">
uiTeam324
  • 1,042
  • 7
  • 26