How to render page once data is loaded Angular?

Question

I am new to Angular. I am trying to change the layout of the my webpage based on whether a user is logged in or logged out. However this can be done only when the 'true' of 'false' is retrieved from the server. How can I do that? The TS code snippet is:

lgn: boolean;

ngOnInit(): void {
    this.auth.onAuthStateChanged((user) => {
      if (user) {
        this.lgn = true;
      } else {
        this.lgn = false;
      }
    });
  }

The HTML code snippet is:

<div *ngIf="lgn; then thenBlock; else elseBlock"></div>
  <ng-template #thenBlock>Logged In</ng-template>
  <ng-template #elseBlock>Not logged in</ng-template>

However this always shows 'Not logged in'.

The onAuthStateChanged method is taken from @angular/fire package. github.com/firebase/angularfire/blob/master/docs/… — fungous_bread
– fungous_bread, Commented Jul 29, 2020 at 9:51
Have you tried to add some console.log into your if else statement to check if it goes into it ? And also console.log your user ? — Alexis
– Alexis, Commented Jul 29, 2020 at 9:55
The console.log shows true when logged in and false when logged out. However the HTML file is rendered first before data is retrieved from the server. So it is a case where not logged in is displayed first and then the boolean value is retrieved. I want it to be the other way i.e., first data is received and then page is rendered. — fungous_bread
– fungous_bread, Commented Jul 29, 2020 at 10:01

andsilver · Accepted Answer · 2020-07-29 10:23:24Z

1

You need to use Route Resolver to load the user data before you arrive at the component:

Implement a resolver service first:


@Injectable({
    providedIn: 'root'
})
export class UserResolverService implements Resolve<any> {
    constructor(private auth: AngularFireAuth) { }
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.auth.authState;
    }
}

Add the service to your routing:

const routes: Routes = [
    {
        path: 'somepath',
        component: SomeComponent,
        resolve: {
            user: UserResolverService
        }
    }
];

Now you can get the data right after you arrived at the component:

user: any;

constructor(
    private route: ActivatedRoute
) { }

ngOnInit() {
    this.user = this.route.snapshot.data.user;
}

edited Jul 29, 2020 at 10:23

answered Jul 29, 2020 at 9:59

andsilver

6,0323 gold badges22 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fungous_bread Over a year ago

I tried the subscribe method earlier. It works fine but the problem is that the webpage loads first, then data is retrieved and then the status is changed to logged in. Is there a way such that page will be rendered only after data is retrieved?

andsilver Over a year ago

What you want is to use router resolver which will prevent your navigation before a data is arrived.

andsilver Over a year ago

Also you could use routing guard to archieve this.

72GM · Accepted Answer · 2020-07-29 09:55:35Z

0

Sounds like your server call is always returning false - I would confirm this works first using a console log...

And I'd probably write your html like this

<div *ngIf="lgn; else elseBlock">
Logged In
</div>
  <ng-template #elseBlock>Not logged in</ng-template>

answered Jul 29, 2020 at 9:55

72GM

3,1544 gold badges30 silver badges37 bronze badges

2 Comments

fungous_bread Over a year ago

I checked with console.log. The server returns true when user is logged in. I think this is a case where the webpage is rendered first and then data is retrieved from the system.

72GM Over a year ago

yes you are doing a syncronous call... you should be subscribing using rxjs and then it will work

Collectives™ on Stack Overflow

How to render page once data is loaded Angular?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related