1

I have just working with Angular v6.0.3. I have a little experience with AngularJS v1.6.9

I'm designing a basic webpage with the landing page displaying 2 links: first one to login and the second one to sign up. On clicking the "login" link(I added a (click) event), I have given the routing to "/login"(login-form is a component) and also used ngIf to hide the original contents on the page. After moving to the login component, when I refresh the page "localhost:4200/login", the content I hid using ngIf is showing up again as the variable I used in ngIf is being reloaded to value 'true' on refresh.

How to resolve this? Thanks in advance :)

app.component.ts 

export class AppComponent  { 
        myVar = true;
        divReplace = function(){ 
         if(this.myVar == true)
          {
          this.myVar = false;
          }
                               }
                                  }

app.component.html

<div class="fullPage">
  <header>Welcome</header>
 </div> 

  <router-outlet></router-outlet>

<div class="fullPage">
 <div *ngIf="myVar">
  <h3>Please login or sign up to continue :))</h3><br>
  <div id="x"><a routerLink="/login" (click)="divReplace()">Login</a> </div>
  <div>New user? <a routerLink="/signup">Sign Up</a></div>
</div>
</div>

Landing page

Login page after click on "login" link

Login page after refresh

I want the content showing under the login form to not show even after refresh. I even tried using constructor() and ngOnInit() so that the variable is initialzed only once but nothing seems to work. Even web searches yielded no solutions :(

Thanks in advance!

Harshit Trehan
  • 21
  • 1
  • 5

2 Answers2

0

The easiest way to do this is described here:

https://stackoverflow.com/a/36183988/2538449

A more advanced approach with persisted values would be to implement a service returning an Observable of the desired type. I'm using this way to retrieve and to store server based user settings after the user logged in, for example.

Andreas
  • 66
  • 3
  • Didn't quite understand that. Do I need to create a custom service just to implement this ? – Harshit Trehan Jun 01 '18 at 07:13
  • Sessions and storage are still the underlying mechanisms for your browser. Services are shared, but they dont address storage. I ran into this with a shopping cart, even with observable, I would refresh and the cart was now empty. I still had to write it to the session or gone. – Dan Chase Jun 01 '18 at 07:25
  • Okay. That explains it. Thanks @DanChase – Harshit Trehan Jun 01 '18 at 08:24
0

Use a session to store the information. Think of it this way, how would your browser know to initialize the value with anything other than what it says in your component class? HTTP is stateless, each refresh is new, so you need storage and sessions.

Dan Chase
  • 993
  • 7
  • 18
  • Okay. That's the only way to do this I guess. Thanks a lot! :)) – Harshit Trehan Jun 01 '18 at 08:23
  • If you do find a way I'd love to know, though. One thing is sessions can only be strings so if you try to store a model class, you lose your methods when you json.stringify. probably a bit off topic for your question, but I thought I'd mention it. – Dan Chase Jun 01 '18 at 11:56
  • Session requires cookie and you have to implement corresponding logic on your server. But if you store your values in cookies, you don't need session, you don't have to implement anything on the server, it may be much easier. – mentallurg Jun 01 '18 at 16:04
  • @mentallurg why not write as answer? As comment it looked like it wasnt answered. I saw the cookie comment but tried to add value by making the answer robust. Were you just trying to give a quick answer without typing much? – Dan Chase Jun 01 '18 at 16:08