Call a component function when page completely load in Angular 10

Question

I got an angular 10 app that first start a login page. But before presenting the login fields, I need to check the presence of the web service and check if the app is currently in maintenance. So I need to call a function in my login.component.ts file but when all the contents of the page will be loaded and displayed.

I tried this:

 this.router.events.subscribe((e) => {
   if (e instanceof NavigationEnd) {
      this.NetworkTest();
   }
 });

in my constructor but, it's called a little too early and my main background image is not displayed. Any advice for me?

I also tried ngAfterViewInit with the same result.

Thanks

UDATE1: It is normal that in the NavigationEnd event the binding do not work? The properties is change in background, but the view is not updated.

Is the only issue the background image not being loaded completely..? — MikeOne, Sep 04 '20 at 17:47
Maybe put the main background image in the index.html and make sure your login.component doesn't have a background that will obscure any part of the main image. — The James, Sep 04 '20 at 17:59

score 0 · Answer 1 · answered Sep 04 '20 at 22:10

ngAfterViewInit seems a good place for your needs.
To make sure background is displayed you can follow this.

To handle displaying login form I suggest creating a flag. Set it to true only if web service is running.
TS: let isWebServiceRunning = false;
HTML: <div *ngIf="isWebServiceRunning">Login Form</div>

Call a component function when page completely load in Angular 10

1 Answers1