Within my Angular 4.3.0 project, the header, left panel, and right panels are initially hidden on the login page until a successful login occurs. However, once they become visible, the data is not pre-loaded properly causing errors due to the ngOnInit method being called when the components first load. Is there a way to ensure that the components are loaded or refreshed upon successful login?
Below is the code snippet from App-Component.html:
<loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar>
<div class="app app-header-fixed" value="test">
<app-header *ngIf="header"></app-header>
<app-left-menu *ngIf="leftmenu"></app-left-menu>
<div id="content" class="app-content plain_wraper" role="main">
<router-outlet></router-outlet>
</div>
<app-right-menu *ngIf="rightmenu"></app-right-menu>
</div>
For instance, in the app-header component, the ngOnInit method fetches the user's profile like this:
this.userProfile = this.userServ.getUserProfile();
However, this causes errors as the profile data doesn't load correctly. Is there a way to ensure that the profile data loads only when the component becomes visible?
Would subscribing to the visibility parameters and loading the profile data once the component is visible be a suitable solution?
Thank you!