title: Angular 2+ - After successful Login, change my Login component in Header to User Account Component
body: <p>I am building an Angular2+ App. Started learning angular 1 week back.</p>
  
  <p>Following is the structure
  -index.html
      - AppComponent(app-root)
         - Header Component(header)
            - Signup Component(signup)</p>
  
  <p>SignupComponent is a Modal. </p>
  
  <p>After a successful login, I want to replace my Signup Account with User Component(which should be drop down menu with multiple links - (Account link, Logout link) ).</p>
  
  <p>The solution which I thought was that on a successful login, I should emit the event to Header component from Signup Component.</p>
  
  <p>On receiving the event , Header component should switch to UserComponent and hide the Signup Component Div.</p>
  
  <p>User Component should have a Auth Gaurd because the links in drop down should be protected.</p>
  
  <p>I have few questions</p>
  
  <ul>
  <li><p>How should I route from Signup Modal to index.html with changes needed? - Do I need to refresh the index.html where it will load the account component? How should I route to index.html which should have the new User component in place of signup component. ?</p></li>
  <li><p>Is this a right approach?  If not,what is the ideal way to do this in angular 2+?</p></li>
  </ul>