In my Angular4 project, I have set up a login page. Within the parent app.component file, I have included a navigation bar with login and signup buttons. Upon successful login, the login and signup buttons should be hidden, and the username should appear instead. To achieve this, I have utilized local storage to verify user data and hide the buttons accordingly. The issue arises when I navigate back to the parent HTML after logging in - the buttons remain visible, and the name does not display until the page is refreshed. How can I update the navigation bar dynamically upon returning to it in Angular4?
login component:
this.storage.store('loginInfo',this.loginData);
app component:
this.uname = this.storage.retrieve('loginInfo');app.component:
<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 892</li>
<li *ngIf="uname==undefined||uname==null"><i class="glyphicon glyphicon-log-in" aria-hidden="true"></i><a routerLink="/login">Login</a></li>
<li *ngIf="uname==undefined||uname==null"><i class="glyphicon glyphicon-book" aria-hidden="true"></i><a routerLink="/register">Register</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-transform:none">Hi,<span style="color:red;font-size:18px"> {{ uname.user_display_name}}</span></a>