title: Routerlink on Home page after Login
body: <p>I am trying to create a Angular app with Login functionality. </p>
  
  <p>I used <code>ng cli</code> to generate the blank app. It came with <code>AppComponent</code>. </p>
  
  <p>I then created a <code>LoginComponent</code> and a <code>HomeComponent</code> with functionality as below:</p>
  
  <ul>
  <li><code>LoginComponent</code> will be the starting point for the app. </li>
  <li>On successful login, the app will land on <code>HomeComponent</code>. </li>
  </ul>
  
  <p>My <code>app.module.ts</code> is as below:</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      HomeComponent,
    ],
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      HttpModule,
      RouterModule.forRoot([
        {
          path: 'home',
          component: HomeComponent,
        },
        {
          path: 'login',
          component: LoginComponent
        },
      ])
    ],
    providers: [AuthenticationService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My <code>app.component.html</code> is as below:</p>
  
  <pre><code>&lt;div id="mainPage"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <code>login.component.ts</code> has this:</p>
  
  <pre><code>onSubmit(user){
      this.authenticationService.login(user)
      .subscribe(
        data =&gt; {
            this.router.navigate('/home');
        },
        error =&gt; {
            console.log("Username or Password is incorrect!");
        });    
    }
  </code></pre>
  
  <p>This works perfectly fine. And on successful login, I land on <code>home.component.html</code> which has <code>home works!</code> message.</p>
  
  <p>Question: How can I now have multiple router-links in my home page to navigate through different other components/pages. E.g. One component shows User details (<code>UserDetailComponent</code>), another component shows User hobbies (<code>UserHobbyComponent</code>) and yet another component shows User address (<code>UserAddressComponent</code>).</p>
  
  <p>All the examples I see shows addition of <code>router-links</code> above <code>&lt;router-outlet&gt;</code> tag in <code>app.component.html</code>. I don't want that. I want <code>app.component.html</code> to just show the login page and I want home page to show all the other links. </p>
  
  <p>Any help on how to go about with this would be great. 
  Any link showing this would help me a lot.</p>
  
  <p>Thanks! </p>