title: Hiding the required menu items for the particular user in angular 2
body: <p>I have created an angular application in which I have a login form where i have implemented authentication using service and guard .</p>
  
  <p>I have defined a interface user with username and password.Using this interface in <strong>authentication.service.ts</strong> I have defined two users <strong>admin</strong> and <strong>user</strong>.</p>
  
  <p>I have also implemented a guard named <strong>authentication.guard.ts</strong> where I have taken <strong>CanActivate</strong> RouteGaurd to route the user to the page which he can access.</p>
  
  <p>In my application there is an admin page which can only be accessed by <strong>admin</strong> user, so if the admin logs in only then it navigates to <strong>Admin Page</strong> .If <strong>user</strong> logs in then he will be redirected to <strong>Home Page</strong> skipping the <strong>Admin Page</strong></p>
  
  <p>When a <strong>admin</strong>  or <strong>user</strong> logs into the application, a menu bar appears where I have three menu items <strong>Home, AdminActivity ,RegisterUser</strong> .</p>
  
  <p>I am trying to hide the <strong>AdminActivity</strong> menu item if <strong>admin</strong> logs into the application and hide the <strong>RegisterUser</strong> menu item if <strong>user</strong> logs into the application.</p>
  
  <p>I tried to import the authentication service in <strong>app.component.ts</strong> but I am unable to fetch the logged username and password.</p>
  
  <p>Can anybody please help me out in implementing the desired functionality as I needed to implement in my application</p>
  
  <p>Please access my sample application <a href="https://stackblitz.com/edit/role-based-authentication?file=app%2Fapp.component.ts" rel="nofollow noreferrer">here</a></p>