title: conditionally render component angular4
body: <p>I have a requirement to implement SSO login and external login using owin based authentication in my application. If the user is sso(single sign on) type user he will land on dashboard component and if not then he will land on login component.</p>
  
  <p>For this i have make a request to my webapi from app component on ngInit event to get user Details (token, user access, group and role etc).</p>
  
  <p>on the basis of webapi information i am navigating it either dashboard component or login component.</p>
  
  <p>I am able to achieve my goal but its not as per my expectation because if user is SSO type he is able to navigate on dashboard but before it, he is also able to see login screen because its already in my route table in app.routingmodule.ts file.</p>
  
  <p>I have two question where i need help-</p>
  
  <p>1) what is the best way to render appropriate component as per my API Response?</p>
  
  <p>2) What is the best way to manage user data(like as user details, permission, access_token) after succesfully login, should i use sessionStorage or something else?</p>
  
  <p>my routing code as-</p>
  
  <pre><code>const fidsRoutes: Routes = [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'dashboard', component: DashBoardComponent }
    ];
  </code></pre>
  
  <p>my app component ngOnInit event as-</p>
  
  <pre><code>ngOnInit() {
  
  this.authenticationservice.userLogin(this.loginData)
     .subscribe(
     res =&gt; {
       if (res.access_token != null) {
         this.userDetails = res;
  
         sessionStorage.setItem('access_token', this.userDetails.access_token);
         sessionStorage.setItem('userId', &lt;any&gt;this.userDetails.Id);
         //const session = sessionStorage.getItem('access_token');
  
        // this.screenName = this.userDetails.Screen.split("~");
         //this.routeScreen = this.userDetails.Route.split("~");
         sessionStorage.setItem("UserId", &lt;any&gt;this.userDetails.Id);
  
         sessionStorage.setItem("MenuDataScreen", this.userDetails.Screen);
  
         sessionStorage.setItem("MenuDataRoute", this.userDetails.Route);
  
         this.router.navigate(['dashboardcomponent']);
       } 
  
       else {
         this.router.navigate(['logincomponent']);
       }
     },
     err =&gt; {
       this.router.navigate(['logincomponent']);
     }
     );
    }
  
  }
  </code></pre>