title: How to show/hide element depending on user role Angular 4
body: <p>I'm working on a project which has more than one user type (SuperUser - SchoolAdmin - Teacher)</p>
  
  <p>And each role has privilige to see some elements.</p>
  
  <p>How do i hide elements depending on the logged user role using *ngIf?</p>
  
  <p>This is the project <a href="https://stackblitz.com/edit/angular-vduzzk" rel="nofollow noreferrer">link</a> on Stack-blitz, i uploaded some of it to guide me with the live preview.</p>
  
  <p>Inside app you will find common services >> auth, this is the folder which has login service and authentication guard.</p>
  
  <p>Inside models >> enum, you will find user type enum.</p>
  
  <p>Inside component sign-in you will find the form which defines user type.</p>
  
  <p>Inside routes you will see the expected roles made for each component.</p>
  
  <p>Users that i made for testing:</p>
  
  <p>This should route you to the school-list</p>
  
  <p>Admin (which has super user role):
  test1@test.com
  Password: 12345</p>
  
  <p>This should route you to the dashboard</p>
  
  <p>Student (which has student role):
  test2@test.com
  Password: 12345</p>
  
  <p>For example is i want to hide element on the dash-board to be only shown to the super user role, how can i do this?</p>
  
  <p>I know that there is a way with ngIf but i'm stuck on the right way to write it inside the NgIf, i want examples on my code not a dummy code.</p>
  
  <p>Update: issue has been resolved so i deleted the users made for testing.</p>