How to implement change menu in angular 2

Question

I have navigation: login, register, etc. I registered with Google in angular 2, and after I go through Google I want my navigation to dynamically change when I log out, etc.

My navigator in app.component.html

 <ul id="navigation-menu"> <li routerLinkActive="active"><a routerLink="/about">About</a></li> <li routerLinkActive="active"><a routerLink="/contact_us">Contact us</a></li> <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="logged"> <a routerLink="/login" class="loginLink">Log in</a> </li> <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="logged"> <a routerLink="/signin" class="signLink">Sign up</a> </li> <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="!logged"> <a routerLink="/uprofile">Profile</a> </li> <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="!logged"> <a routerLink="/bprofile">BProfile</a> </li> <li *ngIf="!logged"><a routerLink="/login" class="loginLink" (click)="logout()">Logout</a></li> </ul> 

In my app.component.ts application, I use hook_ngDoCheck and check localStorage. If it is not empty, I change the navigation.

My app.component.ts

 export class AppComponent implements DoCheck { logged: boolean = true; changeMenuLink() { if (localStorage.getItem("currentUser")) { this.logged = false; } } ngDoCheck() { this.changeMenuLink(); } 

When I enter through Google, the page is redirected to the search page, but nav does not change. The menu changes only after clicking on the logo or on another menu item.

fb-gplus-api.component.ts

 public auth2: any; public googleInit() { gapi.load('auth2', () => { this.auth2 = gapi.auth2.init({ client_id: 'APP_ID.apps.googleusercontent.com', // your-app-id cookiepolicy: 'single_host_origin', scope: 'profile email' }); this.attachSignin(document.getElementById('googleBtn')); }); } public attachSignin(element) { this.auth2.attachClickHandler(element, {}, (googleUser) => { let profile = googleUser.getBasicProfile(); let userToken: SocialLogin = new SocialLogin(); userToken.uid = profile.getId(); userToken.token = googleUser.getAuthResponse().id_token; this.httpToken.postToken(userToken) .toPromise() .then(resp => { if (resp.status === 'OK') { this.checkStatus(userToken); } }) }, (error) => { alert(JSON.stringify(error, undefined, 2)); } ); } checkStatus(user) { let token = this.randomToken.generateToken(40); localStorage.setItem('currentUser', JSON.stringify({uid: user.uid, token: token})); alert("Login success! Have a nice day!"); this.router.navigate(['/search']); } ngAfterViewInit(){ this.googleInit(); } 

I think the problem with changing the menu starts after using ngAfterViewInit() . I really don't understand how to solve this problem. How can i do this?

Hello

Answer 1

This is because you are doing some kind of action outside of ngZone. To solve this problem, first import ngZone:

 import {NgZone} from "@angular/core"; 

then enter it into the component that makes the asynchronous call to google login:

 constructor(private zone: NgZone) 

finally, handle all the angular2 variables that you execute in the callback inside ngzone:

 (googleUser) => { this.zone.run( () => { .... }); }