How to hide the contents of other page untill login using angular4

Question

i have 2 pages.. in one one page i have header section with signIn, and in other page i have top header contents and SignUp form. 1. the top header contents must be hidden. Once i signin the topheader must be shown. 2. if i havent signed in, then the signup form must be shown, once sign IN, the signUp form must be hidden.

Answer 1

You need to use sessions.

Here is a kind of snippet for you:

app.factory('Session', function($http) {
 var Session = {
    data: {},
    saveSession: function() { /* save session data to db */ },
updateSession: function() { 
  /* load data from db */
  $http.get('session.json').then(function(r) { return Session.data = r.data;});
}
};
Session.updateSession();
 return Session; 
});

Here is Plunker example how you can use that: http://plnkr.co/edit/Fg3uF4ukl5p88Z0AeQqU?p=preview

Answer 2

use local storage to set the values like

localStorage.setItem("yourvariable", 'true');

get this variable on every page load to check if it true or no. like

localStorage.getItem("yourvariable");

you can also update the local storage value like

var updatevalue= JSON.parse(localStorage.getItem("yourvariable"));

updatevalue = "false";

localStorage.setItem("yourvariable",JSON.stringify(updatevalue));