3

I am working on a shopping site. in that header and footer is fixed in app.component.ts, but router-outlet is dynamic. user login in header and cart tab in header component when I have a login from login component (router-outlet) it's working but in the header, the username is not showing because I have saved some user data in local storage of web browser. data is saving in that but after successful login, it's not showing username from local storage. but when I have refreshed manually then the username is showing. I have many similar issues for like cart item, order etc.

Vigneshwaran Markandan
  • 947
  • 1
  • 16
  • 37
Vikram Barnwal
  • 47
  • 5
  • Post a bit of code – Luka P Jul 08 '17 at 13:24
  • There are a few solutions for letting `AppComponent` know when something important, such as a login event, occurs. Show us the code that logs in the user – BeetleJuice Jul 08 '17 at 14:41
  • you have to make use of event emitters in this case in case of sucessfull login emit the value so that the header component can capture that and use that , or make use of shared services – Rahul Singh Jul 09 '17 at 08:22
  • 1
    onSubmit(loginData: UserLogin): void { this.userService.loginUser(loginData) .then(top => { this.loginResponse = top; this.responseMessage = top.message; this.responseStatusCode = top.status; if (this.responseStatusCode == 200) { this.userDetails = { token: top.data.token, UserId: top.data.UserId } localStorage.setItem('userData', JSON.stringify(this.userDetails)); this.router.navigate(['/home']);window.location.reload(); }}})} – Vikram Barnwal Jul 11 '17 at 07:22
  • @RahulSingh I have used eventemiter() but it's not working. It's help in parent child component. not in parallel component. – Vikram Barnwal Jul 11 '17 at 07:24
  • @VikramBarnwal then you can make use of shared services to pass info to all the components take a look at this link might help in making shared services https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2 or you can also use ngrx store – Rahul Singh Jul 11 '17 at 07:29
  • http://embed.plnkr.co/aJe5SUtFlnpmGXWA5eHk/ – Vikram Barnwal Jul 11 '17 at 12:36
  • I have uses broadcast and message-event to solve this. Thanks all for suggestions – Vikram Barnwal Jul 11 '17 at 12:36

0 Answers0